customize radio button in html - HTML CSS CSS Form

HTML CSS examples for CSS Form:input radio button

  1. HOME
  2. HTML CSS
  3. CSS Form
  4. input radio button

Description

customize radio button in html

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

label {<!-- w w w  .  j a  v a  2s.  com-->
   display: inline;
}
.radio-1 {
   width: 193px;
}
.button-holder {
   float: left;
   margin-left: 6px;
   margin-top: 16px;
}
.regular-radio {
   display: none;
}
.regular-radio + label {
   background-color: #fafafa;
   border: 2px solid #cacece;
   border-radius: 50px;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 -15px 10px -12px rgba(0, 0, 0, 0.05) inset;
   display: inline-block;
   padding: 11px;
   position: relative;
}
.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;
}
.regular-radio:checked + label:after {
   background: none repeat scroll 0 0 #94E325;
   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;
}
.regular-radio:checked + label {
   background-color: #e9ecee;
   border: 2px solid blue;
   color: #99a1a7;
   padding: 11px;
}
.regular-radio + label:active, .regular-radio:checked + label:active {
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1) inset;
}


      </style> 
 </head> 
 <body> 
  <div class="button-holder"> 
   <input type="radio" checked="" class="regular-radio" name="radio-1-set" id="radio-1-set"> 
   <label for="radio-1-set"></label> 
   <br> 
   <input type="radio" checked="" class="regular-radio" name="radio-1-set" id="radio-2-set"> 
   <label for="radio-2-set"></label> 
   <br> 
  </div>  
 </body>
</html>

Related Tutorials