Radio Button with rounded shadow on left - 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 Button with rounded shadow on left

Demo Code

ResultView the demo in separate window 

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

.main {<!--from   w w  w  . ja  va  2  s.com-->
   padding-left: 20px;
}
.radio {
   padding-bottom: 5px;
}
label {
   padding-left: 5px;
}
input[type="radio"] {
   width:15px;
   height:15px;
   box-shadow: -4px 0 0 maroon;
   border-radius: 999px;
   -webkit-appearance: inherit;
   border:1px solid #999999;
   position:relative;
   box-sizing:border-box;
}
input[type="radio"]:checked:before {
   content:"";
   position:absolute;
   border-radius: 999px;
   left:25%;
   top:25%;
   width:50%;
   height:50%;
   background:#999999;
}


      </style> 
 </head> 
 <body> 
  <div class="main"> 
   <h3>OPTIONS</h3> 
   <div class="radio"> 
    <input type="radio"> 
    <label>C#</label> 
   </div> 
   <div class="radio"> 
    <input type="radio"> 
    <label>Java</label> 
   </div> 
   <div class="radio"> 
    <input type="radio"> 
    <label>Python</label> 
   </div> 
   <div class="radio"> 
    <input type="radio"> 
    <label>Ruby</label> 
   </div> 
   <div class="radio"> 
    <input type="radio"> 
    <label>HTML5</label> 
   </div> 
   <div class="radio"> 
    <input type="radio"> 
    <label>CSS3</label> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials