Css background image for radio button - 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

Css background image for radio button

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;
}
label {<!--from w ww .  j a  v  a 2 s  .c  o m-->
   display:block;
   padding-left:30px;
   font-family:Arial;
   font-size:16px;
   background: url('https://www.java2s.com/style/demo/Google-Chrome.png') left center no-repeat;
}
input[type="radio"]:checked + label {
   background: url('https://www.java2s.com/style/demo/Google-Chrome.png') left center no-repeat;
}


      </style> 
 </head> 
 <body> 
  <input type="radio" id="radio1" name="radios" value="male" checked> 
  <label for="radio1">Male</label> 
  <input type="radio" id="radio2" name="radios" value="female"> 
  <label for="radio2">Female</label>  
 </body>
</html>

Related Tutorials