html - 自定义样式的单选按钮？

Question

<分区>

Answer 1

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

因此，虽然这可能不是您来这里寻找的东西，但我鼓励您至少试一试。

示例:Here's我做了什么。

试一试:进入图像编辑器并删除文本。现在，按钮上显示的文本在您的 HTML 代码中。 比图像更容易编辑，而且速度也更快。

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

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

这将选择页面上的所有单选按钮并为它们提供 display:none属性(property)。它隐藏了单选按钮，因为您不想再看到那些丑陋的东西。

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

这将选择所有单选按钮标签。在我们的 HTML 中，我们为每个 <input> 创建了标签元素。这是 HTML 中的内置功能:单击标签时，会自动选择单选按钮。我们这里不需要任何 javascript!不要重新发明轮子。

在这里，我们定义了背景图像和要在背景图像上显示的文本样式(如果有)。在这种情况下，它是“XS”、“S”和“M”。我用过 display:table-cell并排显示按钮(如在您的链接中)并使用 vertical-align属性(property)。 如果没有文本，只需将其更改为 display:inline-block并从那里进行调整。

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

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

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

您可以玩弄细节。即使它不会显示 IE8 和之前的图像，这仍然会很好地返回到您在 <label> 中的任何文本。 .它只会转到常规的旧单选按钮。足够聪明的人会使用 Chrome 或保持 IE 更新，好吧，他们会得到额外的视觉享受。