Hide radiobutton but show pseudo-element?

Issue

I’m trying to hide a radio-button and use :before to create a custom one.

Here is my CSS:

input[type=radio]{
    display: none;  
}

input[type=radio]:before{
    content: "";
    display: inline-block;  

    width: 19px;
    height: 19px;
    margin-bottom: 0;
    border: 1px solid #ddd;
}

I expect this to generate an empty square. The problem seems to be that when I apply display: none to my input, this also effects the :before element.

Solution

Try this

<input type="radio" id="r1" name = "r1" class="rdb" style="visibility:hidden" />
<label for="r1">Male</label>
<input type="radio" id="r2" name = "r2" class="rdb" style="visibility:hidden" />
<label for="r2">Female</label>

Live Demo

Answered By – Sandip

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0