Radio Buttons with button look and feel - 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

Radio Buttons with button look and feel

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">

input[type=radio] {
   display:none;
}
input[type=radio] + label {
   padding: 4px 12px;
   margin-bottom: 0;
   font-size: 14px;
   line-height: 20px;
   color: #333;
   text-align: center;
   text-shadow: 0 1px 1px rgba(255,255,255,0.75);
   vertical-align: middle;<!--   w  w w. j  a va 2  s . co m-->
   cursor: pointer;
   background-color: yellow;
   background-image: -moz-linear-gradient(top,#fff,#e6e6e6);
   background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6));
   background-image: -webkit-linear-gradient(top,#fff,#e6e6e6);
   background-image: -o-linear-gradient(top,#fff,#e6e6e6);
   background-image: linear-gradient(to bottom,#fff,#e6e6e6);
   background-repeat: repeat-x;
   border: 1px solid #ccc;
   border-color: #e6e6e6 #e6e6e6 #bfbfbf;
   border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
   border-bottom-color: #b3b3b3;
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffe6e6e6',GradientType=0);
   filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
   -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
   -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
   box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
}
input[type=radio]:checked + label {
   background-image: none;
   outline: 0;
   -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
   -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
   box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
   background-color:#e0e0e0;
}


      </style> 
 </head> 
 <body>
   Click radio buttons to select: 
  <br> 
  <br> 
  <input type="radio" id="radio1" name="radios" value="all" checked> 
  <label for="radio1">iPhone</label> 
  <input type="radio" id="radio2" name="radios" value="false"> 
  <label for="radio2">Galaxy S IV</label> 
  <input type="radio" id="radio3" name="radios" value="true"> 
  <label for="radio3">Nexus S</label>  
 </body>
</html>

Related Tutorials