have different colors of radio buttons - 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

have different colors of radio buttons

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>CSS only Custom Radio Buttons</title> 
  <style>

div:nth-child(2) input[type="radio"]:checked + label span {
   background: green;
}
div {<!--  w  ww .j  a v a2s.  com-->
   margin: 0 0 0.75em 0;
}
input[type="radio"] {
   display: none;
}
input[type="radio"] + label {
   color: #292321;
   font-size: 14px;
}
input[type="radio"] + label span {
   display: inline-block;
   width: 19px;
   height: 19px;
   margin: -1px 4px 0 0;
   vertical-align: middle;
   cursor: pointer;
   -moz-border-radius: 50%;
   border-radius: 50%;
}
input[type="radio"] + label span {
   background-color: white;
   border: 1px solid black;
}
input[type="radio"]:checked + label span {
   background-color: blue;
   border: 1px solid blue;
}
input[type="radio"] + label span,
input[type="radio"]:checked + label span {
   -webkit-transition: background-color 0.4s linear;
   -o-transition: background-color 0.4s linear;
   -moz-transition: background-color 0.4s linear;
   transition: background-color 0.4s linear;
}


      </style> 
 </head> 
 <body translate="no"> 
  <div> 
   <input type="radio" checked id="radio01" name="radio"> 
   <label for="radio01"> <span></span> Radio Button 1 </label> 
  </div> 
  <div> 
   <input type="radio" id="radio02" name="radio"> 
   <label for="radio02"> <span></span> Radio Button 2 </label> 
  </div>  
 </body>
</html>

Related Tutorials