How to style radio buttons

      No Comments on How to style radio buttons

How to style radio buttons – using simple CSS tricks

Male
FeMale

How to style radio buttons

HTML:

<form class="custom_radio_button">
  <div class="in">
    <span>Male</span>
    <input type="radio" name="gender">
    <label for="gender" class="rad_k"></label>
  </div>
  <div class="in">
    <span>FeMale</span>
    <input type="radio" name="gender">
    <label for="gender" class="rad_k"></label>
  </div>
</form>

CSS:

.custom_radio_button .in
{
  position:relative;
  width:200px;
  display:inline;
  float:left;
  margin:30px;
}

Setting up the position of the <span> holding the content for the <label>

.custom_radio_button .in span
{
  position:absolute;
  left:34px;
  top:4px;
}

Positioning the <label> and input radio button one over the other by setting position absolute

.rad_k
{
  position:absolute;
  left:5px;
  z-index:1;
  width:22px;
  height:22px;
  border-radius:100%;
  background-color:#003399;
}
.custom_radio_button .in input[type="radio"]
{
  position:absolute;
  z-index:2;
  left:4px;
  top:1px;
  opacity:0; //hiding the radio buttton
}

Displaying the check icon using the css content property. This works when the input box in checked.

.custom_radio_button .in input[type="radio"]:checked ~ .rad_k:before
{
  content:"\2714";
  color:#fff;
  position:absolute;
  left:4.5px;
}

Leave a Reply

Your email address will not be published. Required fields are marked *