Web Services 自定义样式单选按钮?[已关闭]

rjee0c15  于 2022-11-15  发布在  其他
关注(0)|答案(2)|浏览(138)

**已关闭。**此问题不符合Stack Overflow guidelines。当前不接受答案。

要求代码的问题必须证明对要解决的问题有最低限度的了解。包括尝试的解决方案、为什么不起作用以及expected结果。另请参阅:Stack Overflow question checklist
八年前就关门了。
Improve this question
你好,我是一个学生,是建立一个朋友的业务网站,我已经学会了在线如何使单选按钮样式与自定义图像,但我正试图使一个小,中,大的选项,使用户能够选择大小。我知道java,但不是很多的Jquery。我理解如果这是不可能的,只要我能编写代码,检查选择了哪个选项,使其直接指向右页/购物车产品。
--这里有一个我目前掌握的例子:任何帮助都将不胜感激!
谢谢你,斯蒂芬·T。

8wtpewkr

8wtpewkr1#

你有相当多的JavaScript在单选按钮上工作。你正在使用的javaScript实际上是创建动态<span>元素并完全隐藏单选按钮。虽然这可能更好地支持浏览器,但更“经得起未来考验”(有人甚至可能会说“正确”)这样做的方法是通过纯CSS。它更简单,给你更多的选择和定制,而且它的加载速度比那个巨大的JavaScript文件快得多。
所以,虽然这可能不完全是你来这里寻找的,但我鼓励你至少给予一试。

示例:我所做的一切。

给予看:进入你的图像编辑器并删除文本。2现在,显示在按钮上的文本在你的HTML代码中。3比图像编辑容易得多,也更快。

代码解释:制作自订CSS选项按钮

input[type=radio] {
    display:none; 
}

这将选中页面上的所有单选按钮,并赋予它们一个display:none属性。它将隐藏单选按钮,因为您不想再看到这些丑陋的东西。

input[type=radio] + label { ... }

这将选择所有单选按钮标签。在我们的HTML中,我们为每个<input>元素创建了标签。这是HTML的一个内置特性:当标签被点击时,单选按钮会自动被选中。这里我们不需要任何javascript!不要多此一举。
这里,我们定义背景图像和要在背景图像上显示的文本的样式(如果有)。在本例中,它们是“XS”、“S”和“M”。我使用display:table-cell并排显示这些按钮(就像在您的链接中一样)并使用vertical-align属性。如果没有文本,只需将其更改为display:inline-block并从那里进行调整。

input[type=radio]:checked + label { ... }

最后,我们为选定的选项指定样式。在您的例子中,我将背景图像向下移动了42 px(background-position:0 -42px;)。同样,您需要从图像中删除文本。您可以查找其他样式-您可以通过添加以下内容使文本“发光”:
text-shadow:2px 2px 10px #FF00FF;
你可以在细节上玩玩。即使它不会显示IE8和之前版本的图像,它仍然会很好地回到你在<label>中的任何文本。它只会去普通的旧单选按钮。聪明到使用Chrome或保持IE更新的人,嗯,他们会得到额外的视觉糖果。

db2dz4w8

db2dz4w82#

我猜你是在问这样的问题:
http://jsfiddle.net/vybEf/1/

$('.styled').click(function(){
    var idS=$(this).attr('id');
    var s=idS.substring(5,7);
    $('#txt').css({'font-size':''+s+'px'});
    $('#txt').html(''+s+'px');
});

相关问题