CODEWITHSUNDEEP
css
Aessandro
Aessandro

Reputation: 5761

CSS3 custom radio buttons

the following works perfectly however I would like once the radio button is checked that it doesn't fill the all pink but less so that it looks like a normal radio button. Ideally it would have a 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>

Upvotes: 0

Views: 51

Answers (1)

BhagyashriK
BhagyashriK

Reputation: 525

You can do it using pseudo :after selector . Just add CSS in your existing CSS like this 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

Upvotes: 2

Related Questions