CSS3 自定义单选按钮

Question

下面的工作非常完美，但是我希望一旦选中单选按钮，它不会填充所有粉红色，而是更少，这样它看起来就像一个普通的单选按钮。理想情况下，它会有一个同样居中的漂亮灰色圆圈。

.radio-toolbar input[type="radio"] {
    display:none; 
}

.radio-toolbar label {
    display:inline-block;
    background-color:#faa;
    font-family:Arial;
    font-size:16px;
    padding:5px;
    width:20px;
    height:20px;
    border-radius:50%;
}

.radio-toolbar input[type="radio"]:checked + label { 
    background-color:#333;
}

<div class="radio-toolbar">

    <input type="radio" id="radio1" name="radios" value="all" checked>
    <label for="radio1"></label>

    <input type="radio" id="radio2" name="radios"value="false">
    <label for="radio2"></label>

    <input type="radio" id="radio3" name="radios" value="true">
    <label for="radio3"></label> 

</div>

Answer 1

您可以使用伪 :after 选择器来完成。只需像这样在现有 CSS 中添加 CSS CSS:

 .radio-toolbar label:after{
        content :'';
    }
    .radio-toolbar input[type="radio"]:checked + label:after { 
      width: 18px;
      height: 18px;
      display: block;
      margin: 1px;
      border-radius: 9px;
      background-color: #333;
    }

创建 fiddle Fiddle