CODEWITHSUNDEEP
htmlcssradio-button
Heidi E
Heidi E

Reputation: 361

HTML radio button CSS styling:remove default grey circle

HTML radio button has grey circle around it when loading. Any ideas how I can remove the gray circle around the radio button circle?

Upvotes: 2

Views: 3894

Answers (1)

Dima Vak
Dima Vak

Reputation: 619

You can use that property. But after it you need write your own custom styles for radio.

input[type='radio'] {
    -webkit-appearance:none;
}

For example. Here this circle is green.

input[type='radio'] {
    -webkit-appearance:none;
    width:20px;
    height:20px;
    border:3px solid green;
    border-radius:50%;
    outline:none;
}
input[type='radio']:hover {
    box-shadow:0 0 5px 0px red inset;
}
input[type='radio']:before {
    content:'';
    display:block;
    width:60%;
    height:60%;
    margin: 20% auto;    
    border-radius:50%;    
}
input[type='radio']:checked:before {
    background:green;
}
<input type='radio' name='a' checked/>
<input type='radio' name='a'/>

Upvotes: 4

Related Questions