Suppose there is such a code as to make the rim of the button blue in it, and when pressed in the center, it was also blue.

input[type='radio'], label { cursor: pointer; } input[type='radio'] { height: 22px; width: 22px; } 
 <p> <input type="radio" name="radio1" id="answer1" value="yes"> <label for="answer1">&nbsp&nbspДа</label> </p> <p> <input type="radio" name="radio1" id="answer2" value="no"> <label for="answer2">&nbsp&nbspНет</label> </p>

1 answer 1

Is that only custom, using pseudo-elements:

 input[type='radio'], label { cursor: pointer; } input[type='radio'] { position: relative; height: 22px; width: 22px; -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none; } input[type='radio']::before { content: ''; position: absolute; top: 50%; left: 50%; width: 22px; height: 22px; border-radius: 50%; transform: translate(-50%, -50%); background-color: white; border: 2px solid dodgerblue; } input[type='radio']:checked::after { content: ''; position: absolute; top: 50%; left: 50%; width: 15px; height: 15px; border-radius: 50%; background-color: dodgerblue; transform: translate(-50%, -50%); visibility: visible; } 
 <p> <input type="radio" name="radio1" id="answer1" value="yes"> <label for="answer1">&nbsp&nbspДа</label> </p> <p> <input type="radio" name="radio1" id="answer2" value="no"> <label for="answer2">&nbsp&nbspНет</label> </p>

  • one
    What I have just not done and did not see, but this is the first time I see! - Bharata