Radio buttons with question mark as selected mark - 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 question mark as selected mark

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 va2  s.  c o m-->
   cursor: pointer;
   display: inline-block;
   font-size: 13px;
   margin-right: 15px;
   padding-left: 25px;
   position: relative;
}
.wrapper {
   margin: 50px auto;
   width: 500px;
}
input[type="radio"], input[type="checkbox"] {
   display: none;
}
label:before {
   background-color: #aaa;
   bottom: 1px;
   box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3) inset, 0 1px 0 0 rgba(255, 255, 255, 0.8);
   content: "";
   display: inline-block;
   height: 16px;
   left: 0;
   margin-right: 10px;
   position: absolute;
   width: 16px;
}
.checkbox label:before {
   border-radius: 8px;
}
input[type="checkbox"]:checked + label:before {
   color: #f3f3f3;
   content: "?";
   font-size: 30px;
   line-height: 18px;
   text-align: center;
}


      </style> 
 </head> 
 <body> 
  <h3>CSS3 Custom Checkbox</h3> 
  <div class="checkbox"> 
   <input type="checkbox" value="check1" name="check" id="check1"> 
   <label for="check1">Checkbox No. 1</label> 
   <br> 
   <input type="checkbox" value="check2" name="check" id="check2"> 
   <label for="check2">Checkbox No. 2</label> 
  </div>  
 </body>
</html>

Related Tutorials