**已关闭。**此问题不符合Stack Overflow guidelines。当前不接受答案。
要求代码的问题必须证明对要解决的问题有最低限度的了解。包括尝试的解决方案、为什么不起作用以及expected
结果。另请参阅:Stack Overflow question checklist
八年前就关门了。
Improve this question
你好,我是一个学生,是建立一个朋友的业务网站,我已经学会了在线如何使单选按钮样式与自定义图像,但我正试图使一个小,中,大的选项,使用户能够选择大小。我知道java,但不是很多的Jquery。我理解如果这是不可能的,只要我能编写代码,检查选择了哪个选项,使其直接指向右页/购物车产品。
--这里有一个我目前掌握的例子:任何帮助都将不胜感激!
谢谢你,斯蒂芬·T。
2条答案
按热度按时间8wtpewkr1#
你有相当多的JavaScript在单选按钮上工作。你正在使用的javaScript实际上是创建动态
<span>
元素并完全隐藏单选按钮。虽然这可能更好地支持旧浏览器,但更“经得起未来考验”(有人甚至可能会说“正确”)这样做的方法是通过纯CSS。它更简单,给你更多的选择和定制,而且它的加载速度比那个巨大的JavaScript文件快得多。所以,虽然这可能不完全是你来这里寻找的,但我鼓励你至少给予一试。
示例:我所做的一切。
给予看:进入你的图像编辑器并删除文本。2现在,显示在按钮上的文本在你的HTML代码中。3比图像编辑容易得多,也更快。
代码解释:制作自订CSS选项按钮
这将选中页面上的所有单选按钮,并赋予它们一个
display:none
属性。它将隐藏单选按钮,因为您不想再看到这些丑陋的东西。这将选择所有单选按钮标签。在我们的HTML中,我们为每个
<input>
元素创建了标签。这是HTML的一个内置特性:当标签被点击时,单选按钮会自动被选中。这里我们不需要任何javascript!不要多此一举。这里,我们定义背景图像和要在背景图像上显示的文本的样式(如果有)。在本例中,它们是“XS”、“S”和“M”。我使用
display:table-cell
并排显示这些按钮(就像在您的链接中一样)并使用vertical-align
属性。如果没有文本,只需将其更改为display:inline-block
并从那里进行调整。最后,我们为选定的选项指定样式。在您的例子中,我将背景图像向下移动了42 px(
background-position:0 -42px;
)。同样,您需要从图像中删除文本。您可以查找其他样式-您可以通过添加以下内容使文本“发光”:text-shadow:2px 2px 10px #FF00FF;
你可以在细节上玩玩。即使它不会显示IE8和之前版本的图像,它仍然会很好地回到你在
<label>
中的任何文本。它只会去普通的旧单选按钮。聪明到使用Chrome或保持IE更新的人,嗯,他们会得到额外的视觉糖果。db2dz4w82#
我猜你是在问这样的问题:
http://jsfiddle.net/vybEf/1/