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

您可以使用伪：选择器后执行此操作。只需在现有的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

CSS3自定义单选按钮

1 个答案: