How to create a custom radio button using css

Hello readers, In this article, you will learn to create a custom radio button that looks like a checkbox using css.

custom radio button example Try it Yourself »

How to style html radio button.

  1. Add html elements.
  2.   <input type="radio" name="radio" checked="">
      <input type="radio" name="radio">
      <input type="radio" name="radio">
      <input type="radio" name="radio">
      
  3. Hide the browser's default checkbox using css.
  4.     input[type="radio"] {
          appearance: none;
         }
      
  5. Add more css to style the radio button link box-shadow, border-radius,height,width etc.
  6. border: 1px solid rgba(230,230,230,.4);
    width: 30px;
    height: 30px;
    content: none;
    outline: none;
    box-shadow: 0 0 6px rgba(0,0,0,.4);
    border-radius: 50%;
      
  7. Now , add some content using the pseudo :before selector and style this content.
  8. input[type="radio"]:checked::before {
      color: blue;
      content: "\2713";
      font-weight: bold;
      font-size: 21px;
      display: block;
      width: 100%;
      text-align: center;
    }
      

How to add text inside a radio button.

add text in radio button Try it Yourself »