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.

How to style html radio button.

1. Add html elements.

  <input type="radio" name="radio" checked="">
  <input type="radio" name="radio">
  <input type="radio" name="radio">
  <input type="radio" name="radio">
  

2. Hide the browser's default checkbox using css.

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

3. Add more css to style the radio button link box-shadow, border-radius,height,width etc.

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

4. Now , add some content using the pseudo :before selector and style this content.

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.