html - 自定义样式单选按钮

Question

我想设置单选按钮的样式，例如让圆圈内的黑点变成红色。

Internet 上有几个示例，例如:JSFIDDLE .这个例子的问题是它不能在 Internet Explorer 中运行。

另一点让我的情况变得更难的是，由于实现要求，我不能将任何其他 html 对象添加到以下代码中:

<span class="custom-radio">
    <input id="id4" type="radio" name="id_test" value="">
    <label for="id4">No</label>
</span>

我的问题是:如何在不向上面的代码添加额外的 HTML 的情况下创建自定义单选按钮，并且仍然使其在大多数浏览器(IE、FF、Chrome)中工作

Answer 1

您可以使用 display:none 隐藏输入本身，并在 label 上使用伪元素

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

input[type='radio'] + label {
    position: relative;
    line-height: 1em;
}

input[type='radio'] + label:before {
    content: '';
    width: .5em;
    height: .5em;
    border-radius:100%;
    margin-right: .5em;
    display: inline-block;
    background: red;
    vertical-align: middle;
    box-shadow: 0 0 0 .1em white, 0 0 0 .2em black;
}

input[type='radio']:checked + label:before {
    background: green;
    vertical-align: middle;
}

<span class="custom-radio">
    <input id="id4" type="radio" name="id_test" value=""/>
    <label for="id4">No</label>
</span>

之后，只需要根据口味设置伪元素的样式即可，