Search code examples
csshtmlradio-button

How to customize radio button in html

I am trying to get radio button like this..

enter image description here

But I am getting like this

enter image description here

If No option is selected, I need to customize the radio button and it should show white color inside it. If radio button is selected, it should show green color inside the box. How to achieve this?

Here what I tried.

index.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
<style>
/* Radio Button CSS*/
label {
    display: inline;
}
.radio-1 {
    width: 193px;
}
.button-holder {
    float: left;
    margin-left: 6px;
    margin-top: 16px;
}
.regular-radio {
    display: none;
}
.regular-radio + label {
    background-color: #fafafa;
    border: 2px solid #cacece;
    border-radius: 50px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 -15px 10px -12px rgba(0, 0, 0, 0.05) inset;
    display: inline-block;
    padding: 11px;
    position: relative;

}
.regular-radio:checked + label:after {
    background: none repeat scroll 0 0 #94E325;
    border-radius: 50px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) inset;
    content: " ";
    font-size: 36px;
    height: 8px;
    left: 7px;
    position: absolute;
    top: 7px;
    width: 8px;
}
.regular-radio:checked + label {
    background-color: #e9ecee;
    border: 2px solid #adb8c0;
    color: #99a1a7;
    padding: 11px;
}
.regular-radio + label:active, .regular-radio:checked + label:active {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1) inset;
}
</style>
  </head>
  <body>
 <div class="button-holder">
<input type="radio" checked="" class="regular-radio" name="radio-1-set" id="radio-1-set"><label for="radio-1-set"></label><br>
<input type="radio" checked="" class="regular-radio" name="radio-1-set" id="radio-2-set"><label for="radio-2-set"></label><br>
</div>
    </body>
</html>
Solution

  • Just add the :before pseudo element to take care of the color before the radio button is checked. You could add this to your CSS:

     .regular-radio + label:before {
  background: none repeat scroll 0 0 #FDFDFD;
  border-radius: 50px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) inset;
  content: " ";
  font-size: 36px;
  height: 8px;
  left: 7px;
  position: absolute;
  top: 7px;
  width: 8px;
}

    Working demo. You can ofcourse change the background of this label to match exactly the example you show. Hope it helps.