How to customize radio button in html

Question

I am trying to get radio button like this..

But I am getting like this

Answer 1

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

  
    
    RadioButton1
  
  
    
    RadioButton2
  
  
    
    RadioButton3
  

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

  
  RadioButton1
  
  RadioButton2
  
  RadioButton3