Question

您好我是一名正在为朋友创建网站的学生，我在网上学习了如何使用自定义图片制作单选按钮，但我正在尝试制作一个小型，中型，大型选项以使用户能够选择尺寸。我知道java但不是很多Jquery。我理解，如果不可能，我愿意接受其他方式完成任务，只要我可以制作代码，可以检查选择哪个选项，使其指向正确的页面/购物车产品。

---这是我所做的事情的例子：http://squidsquadgang.com/radiobuttons.html 任何帮助将不胜感激！

谢谢你，斯蒂芬T。

Answer 1

你有很多JavaScript在单选按钮上工作。您正在使用的javaScript实际上是创建动态<span>元素并完全隐藏radiobuttons。虽然这可能会更好地支持旧的浏览器，但更多的“面向未来”（甚至可能说“正确”）的方法是通过纯CSS。它更简单，为您提供更多选项和自定义，并且加载速度比巨大的JavaScript文件快得多。

所以，虽然这可能不是你来这里寻找的，但我鼓励你至少尝试一下。

示例：Here's我做过的事。

尝试一下：进入图像编辑器并删除文本。现在，按钮上显示的文本位于HTML代码中。很多比图像更容易编辑，也更快。

代码解释：制作自定义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 { ... }

最后，我们指定所选选项的样式。在您的情况下，我已将背景图像向下移动了42px（background-position:0 -42px;）。同样，您将要删除图像中的文本。您可以查找其他样式 - 您可以通过添加以下内容使文本“发光”：

text-shadow:2px 2px 10px #FF00FF;

你可以玩弄细节。即使它不会显示IE8以及之前的图像，这仍然可以很好地回归到<label>中的任何文本。它只会转到常规的旧单选按钮。人们足够智能使用Chrome或保持IE更新，好吧，他们会得到额外的眼睛。

Answer 2

我想你问这样的事情：

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');
});

自定义风格的单选按钮？

2 个答案:

代码解释：制作自定义CSS单选按钮