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/

用css造型单选按钮不起作用

1 个答案: