CSS   

Custom radio button design CSS only

This tiny code snippet can be used to create a custom radio button design with CSS only.

HTML Code

<div class="field-wrap">
    <h3>Custom Radio buttons</h3>
    <label class="custom-radios">
        <input type="radio" name="choice"> 
        Custom radio button choice 1
    </label>
    <label class="custom-radios">
        <input type="radio" name="choice"> 
        Custom radio button choice 2
    </label>
    <label class="custom-radios">
        <input type="radio" name="choice"> 
        Custom radio button choice 3
    </label>
</div>

CSS Code

.custom-radios{
  display:flex;
  align-items:center;
  cursor:pointer;
  margin-bottom:10px;
}
.custom-radios input{
  margin-right:10px;
  width:15px;
  height:15px;
  outline:2px solid #2d2d2d;
  border:3px solid #fff;
  border-radius:100%;
  appearance:none;
  -webkit-appearance:none;
  transition:all .3s ease;
}
.custom-radios input:checked{
  background-color:#d72900
}

 

Need a helping hand in fixing your website issues?

If you are facing any problems in implementing these code snippets and tutorials, you can hire us to fix your website issues.

Hire Us