使用 CSS 设置单选按钮不起作用答案

【问题标题】：styling radio button with css doesn't work使用 CSS 设置单选按钮不起作用
【发布时间】：2014-05-04 12:28:27
【问题描述】：

我正在尝试仅使用 css 设置单选按钮的样式，但我不知道为什么它不起作用：

HTML

<input type="radio">

CSS

input[type="radio"]{
    background: green;
}

http://jsfiddle.net/vNmLe/

【问题讨论】：

因为它的外观仍然是默认收音机，您可以将appearance 设置为none（仅适用于基于webkit 的浏览器）并从头开始设置样式。对于其他浏览器，我们需要更多技巧。我认为这对 CSS 初学者来说相当复杂。
你知道如何在其他浏览器上做到这一点吗？用js什么的都无所谓
在这里查看我关于自定义单选按钮的答案stackoverflow.com/questions/23181319/customizing-radio-buttons/… 你会从那里的演示中学到一些东西。
@KingKing 谢谢，但现在我有另一个问题，当我有多个单选按钮并添加样式时，它让我标记所有单选按钮（通常，我只能标记其中一个）你知道为什么吗？
这是因为你的单选按钮没有分组，要分组一些单选按钮，你必须为所有单选按钮设置相同的名称（name属性）。

标签： html css

【解决方案1】：

单选按钮、复选框和选择不能以仅使用 CSS 的跨浏览器方式很好地设置样式。您需要一些额外的标记和一些 javascript。

一种技术是将输入包装在一个 div 中，并将输入的不透明度设置为 0。您将输入放置在包装 div 内，以便它填充整个空间。

HTML：

<div class="faux-radio" data-group="radio-test">
    <input type="radio" id="radio-1" name="radio-test">
</div>

CSS：

input[type="radio"] {
    left: 0;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    z-index: 5;
    /* IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    -moz-opacity: 0;
    opacity: 0;    
}

.faux-radio {
    width: 12px;
    height: 12px;
    background: #f2f2f2;
    border: 1px solid #a6a6a6;
    border-radius: 12px;
    display: inline-block;
    margin-right: 2px;
    position: relative;
}

.faux-radio.selected:after {
    content: '';
    width: 6px;
    height: 6px;
    background: #666;
    border-radius: 6px;
    position: absolute;
    top: 2px;
    left: 2px;
}

label {
    margin-right: 20px;
}

使用这种技术，您可以获得自己的风格，并且仍然可以获得所有标准输入行为。但是每个表单元素都有额外的标记。并且您需要添加一些 javascript 来提供用户在单击表单元素时所期望的视觉反馈。

这是一个包含 js 的快速单选按钮示例：http://jsfiddle.net/xevw3/17/

【讨论】：