html - 如何更改单选按钮的颜色和样式

Question

我有一个代码要修改，但它不工作

HTML

<input type="radio" id="radio-1-1" name="radio-1-set" class="regular-radio" checked />

CSS

.regular-radio:checked:after {
    content: ' ';
    width: 12px;
    height: 12px;
    border-radius: 50px;
    position: absolute;
    top: 3px;
    background: #99a1a7;
    box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);
    text-shadow: 0px;
    left: 3px;
    font-size: 32px;
}
.regular-radio:checked {
    background-color: #e9ecee;
    color: #99a1a7;
    border: 1px solid #adb8c0;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1), inset 0px 0px 10px rgba(0,0,0,0.1);
}

我需要这样的单选框:-

让我知道我该怎么做？

谢谢。

Answer 1

在 css 中是可能的，但不是所有浏览器都可以。

对所有浏览器的影响:

http://www.456bereastreet.com/lab/form_controls/checkboxes/

一种可能性是使用 javascript 的自定义复选框，例如:

http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/