How to customize radio button in html

css html radio-button

18,425

Solution 1

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.

Solution 2

You can achieve desired layout in two ways

Via removing standard appearance using CSS appearance and applying custom appearance. Unfortunately this was doesn't work in IE for Desktop (but works in IE for Windows Phone). Demo:

input[type="radio"] {
  /* remove standard background appearance */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* create custom radiobutton appearance */
  display: inline-block;
  width: 25px;
  height: 25px;
  padding: 6px;
  /* background-color only for content */
  background-clip: content-box;
  border: 2px solid #bbb;
  background-color: #e7e6e7;
  border-radius: 50%;
}

/* appearance for checked radiobutton */
input[type="radio"]:checked {
  background-color: #93e026;
}

/* optional styles, I'm using this for centering radiobuttons */
.flex {
  display: flex;
  align-items: center;
}

<div class="flex">
  <input type="radio" name="radio" id="radio1" />
  <label for="radio1">RadioButton1</label>
</div>
<div class="flex">
  <input type="radio" name="radio" id="radio2" />
  <label for="radio2">RadioButton2</label>
</div>
<div class="flex">
  <input type="radio" name="radio" id="radio3" />
  <label for="radio3">RadioButton3</label>
</div>

Via hiding radiobutton and setting custom radiobutton appearance to label's pseudoselector. By the way no need for absolute positioning here. Demo:

*,
*:before,
*:after {
  box-sizing: border-box;
}

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

input[type="radio"] + label:before {
  content: "";
  /* create custom radiobutton appearance */
  display: inline-block;
  width: 25px;
  height: 25px;
  padding: 6px;
  margin-right: 3px;
  /* background-color only for content */
  background-clip: content-box;
  border: 2px solid #bbb;
  background-color: #e7e6e7;
  border-radius: 50%;
}

/* appearance for checked radiobutton */
input[type="radio"]:checked + label:before {
  background-color: #93e026;
}

/* optional styles, I'm using this for centering radiobuttons */
label {
  display: flex;
  align-items: center;
}

<input type="radio" name="radio" id="radio1" />
<label for="radio1">RadioButton1</label>
<input type="radio" name="radio" id="radio2" />
<label for="radio2">RadioButton2</label>
<input type="radio" name="radio" id="radio3" />
<label for="radio3">RadioButton3</label>

Solution 3

input[type=radio].css-checkbox {
    position: absolute;
    z-index: -1000;
    left: -1000px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
}
input[type=radio].css-checkbox + label.css-label {
    padding-left: 30px;
    height: 25px;
    display: inline-block;
    line-height: 25px;
    background-repeat: no-repeat;
    background-position: 0 0;
    font-size: 25px;
    vertical-align: middle;
    cursor: pointer;
}
input[type=radio].css-checkbox:checked + label.css-label {
    background-position: 0 -25px;
}
label.css-label {
    background-image: url(http://csscheckbox.com/checkboxes/u/csscheckbox_98809849d4d88f570f5ad4ce6c2be5b1.png);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

check out this fiddle.

Solution 4

You should format your radio button both uncheck and checked.

You can find your anwser follow block code:

<!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;
        }

        /*----------------hungtq added--------------*/
        .regular-radio + label:before {
            background: none repeat scroll 0 0 #e9ecee;
            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;
        }
    </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>

Result:

View more solutions

18,425

Author by

UI_Dev

Updated on June 20, 2022

Comments

UI_Dev almost 2 years

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>