How to Customize Radio Button in HTML

How to customize radio button in html

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.

How do I change the color of radio buttons?

A radio button is a native element specific to each OS/browser. There is no way to change its color/style, unless you want to implement custom images or use a custom Javascript library which includes images (e.g. this - cached link)

Custom style radiobuttons

You can hide the input itself with display:none and the use a pseudo-element on the label

input[type='radio'] {display: none;}
input[type='radio'] + label {    position: relative;    line-height: 1em;}
input[type='radio'] + label:before {    content: '';    width: .5em;    height: .5em;    border-radius:100%;    margin-right: .5em;    display: inline-block;    background: red;    vertical-align: middle;    box-shadow: 0 0 0 .1em white, 0 0 0 .2em black;}
input[type='radio']:checked + label:before {    background: green;    vertical-align: middle;}

<span class="custom-radio">    <input id="id4" type="radio" name="id_test" value=""/>    <label for="id4">No</label></span>

How to change the style of radio button in FireFox?

I like Sato's answer, but you could also add this to your CSS:

input[type='radio'] {
  -moz-appearance: initial !important;
}

I'd try to avoid using !important in your CSS, it's not a good practice to use. I think if you remove it from your code, you could probably remove it from my snippet.

why my CSS custom radio button doesn't work?

Update the code as follows.

.radio {
      display: flex;
      align-items: center;
      margin-left: 5px;
      position: relative;
      padding-left: 22px;
      margin-bottom: 10px;
      cursor: pointer;
    }

    .radio input[type="radio"] {
      position: absolute;
      opacity: 0;
      z-index: -1;
    }

    .radio span {
      width: 18px;
      height: 18px;
      background-color: rgba(255, 255, 255, 1);
      border: 1px solid  #484848;
      border-radius: 50%;
      position: absolute;
      display: inline-block;
      left: 0;
    }

    .radio span::after {
      content: "";
      width: 16px;
      height: 16px;
      background-color: #448899;
      border-radius: 50%;
      display: inline-block;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0);
    }

    .radio input[type="radio"]:checked ~ span::after {
      transform: translate(-50%, -50%) scale(1);
    }

<label class="radio">
    <input type="radio" name="time" value="2000" id="morning" required />
    <span></span>
    上半天
  </label>
  <label class="radio">
    <input type="radio" name="time" value="2500" id="afternoon" />
    <span></span>
    下半天
  </label>

---

Related Topics