html - 使用 css 设置样式的单选按钮不起作用

Question

我正在尝试仅使用 css 来设置单选按钮的样式，但我无法弄清楚为什么它不起作用:

HTML

<input type="radio">

CSS

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

http://jsfiddle.net/vNmLe/

Answer 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/