Show image over radio button label - 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

Show image over radio button label

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

.build label {<!--  w w w . jav a2 s  . c  om-->
   -moz-box-shadow: 0px 10px 14px -7px #276873;
   -webkit-box-shadow: 0px 10px 14px -7px #276873;
   box-shadow: 0px 10px 14px -7px #276873;
   background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, yellow), color-stop(1, #408c99));
   background:-moz-linear-gradient(top, yellow 5%, #408c99 100%);
   background:-webkit-linear-gradient(top, yellow 5%, #408c99 100%);
   background:-o-linear-gradient(top, yellow 5%, #408c99 100%);
   background:-ms-linear-gradient(top, yellow 5%, #408c99 100%);
   background:linear-gradient(to bottom, yellow 5%, #408c99 100%);
   filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='yellow', endColorstr='#408c99',GradientType=0);
   background-color:yellow;
   -moz-border-radius:8px;
   -webkit-border-radius:8px;
   border-radius:8px;
   display:inline-block;
   cursor:pointer;
   color:#ffffff;
   font-family:Arial;
   font-size:20px;
   font-weight:bold;
   padding:13px 32px;
   text-decoration:none;
   text-shadow:0px 1px 0px #3d768a;
}
.build label:hover {
   background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #408c99), color-stop(1, yellow));
   background:-moz-linear-gradient(top, #408c99 5%, yellow 100%);
   background:-webkit-linear-gradient(top, #408c99 5%, yellow 100%);
   background:-o-linear-gradient(top, #408c99 5%, yellow 100%);
   background:-ms-linear-gradient(top, #408c99 5%, yellow 100%);
   background:linear-gradient(to bottom, #408c99 5%, yellow 100%);
   filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#408c99', endColorstr='yellow',GradientType=0);
   background-color:#408c99;
}


      </style> 
 </head> 
 <body> 
  <div class="build"> 
   <input type="radio" id="a2" value="a2" name="amount" checked> 
   <label for="a2"> shops <span class="red">text</span> </label> 
  </div>  
 </body>
</html>

Related Tutorials