定制的单选按钮？

Question

你好，我是一个学生，正在为一个朋友的企业建立一个网站，我已经在网上学习了如何使单选按钮的样式与自定义的图像，但我试图作出一个小，中，大的选择，使用户能够选择的大小。我知道java，但不太懂Jquery。我理解如果这是不可能的，并且我对完成任务的其他方式持开放态度，只要我能够编写代码，可以检查选择了哪个选项来使它们指向正确的页面/购物车产品。

谢谢你，斯蒂芬·T。

Answer 1

您有相当多的JavaScript在单选按钮上做工作。您使用的javaScript实际上是创建动态<span>元素并完全隐藏无线电按钮。虽然这可能更好地支持旧的浏览器，但是一种更“未来证明”(甚至可以说“正确”)的方法是通过纯CSS。它更简单，提供了更多的选项和定制，而且它的加载速度将远远快于那个巨大的JavaScript文件。

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

示例：下面是我所做的。

试一试:进入图像编辑器并删除文本。现在，显示在按钮上的文本在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 In (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');
});