CSS3 custom radio buttons -

the following works once radio button checked doesn't fill pink less looks normal radio button. ideally have nice grey circle equally centered.

.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> 

you can using pseudo :after selector . add css in existing 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;     } 

created fiddle fiddle