自定义样式的单选按钮？ [关闭]

Question

您好，我是一名学生，正在为朋友的业务建立网站，我在网上学习了如何制作带有自定义图像样式的单选按钮，但我正在尝试制作一个小型、中型、大型选项，以使用户能够选择尺寸。我知道java但不是很多Jquery。我理解这是否不可能，并且我愿意接受其他完成任务的方法，只要我可以编写代码来检查选择了哪个选项，从而将它们引导到正确的页面/购物车产品。

---这是我目前所拥有的一个例子：http://squidsquadgang.com/radiobuttons.html 任何帮助将不胜感激！

谢谢你， 斯蒂芬·T。

Answer 1

您需要使用大量 JavaScript 来处理单选按钮。您正在使用的 JavaScript 实际上是创建动态 <span> 元素并完全隐藏单选按钮。虽然这可能更好地支持旧浏览器，但更“面向未来”（甚至可以说“正确”）的方式是通过纯 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 { ... }

最后，我们指定所选选项的样式。在您的情况下，我已将背景图像向下移动了 42 像素 (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');
});