Change input background on focus - HTML CSS CSS Property

HTML CSS examples for CSS Property:background

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. background

Description

Change input background on focus

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">
[type="text"], [type="email"] {
   background:red !important;
   background-color:Chartreuse;
   height:4em;
   border:2px solid yellow;
   border-radius:5px;
   -moz-border-radius:5px
}

[type="text"]:focus, [type="email"]:focus {
   background:blue !important;
   height:4em !important;
   border:2px solid pink !important;
   border-radius:5px !important;
   -moz-border-radius:5px !important;
}

.fade [type="text"], .fade [type="email"] {
   background:red !important;
   background-color:OrangeRed;
   height:4em;
   border:2px solid grey;
   border-radius:5px;
   -moz-border-radius:5px
   -o-transition:.6s;
   -ms-transition:.6s;
   -moz-transition:.6s ;
   -webkit-transition:.6s;
   transition:.6s  ;
}

.fade [type="text"]:focus, .fade [type="email"]:focus {
   background:BlueViolet !important;
   height:4em !important;
   border:2px solid Chartreuse !important;
   border-radius:5px !important;
   -moz-border-radius:5px !important;
}
</style> <!--   w  w  w  . j  a v  a  2s.c o  m-->
 </head> 
 <body> 
  <form id="IBNSubscribeForm" accept-charset="UTF-8" action=""> 
   <p>Lorem ip<br> <input id="my" type="email" name="email" value="" placeholder="name@xyz.com" size="34" style="background-color:#fafafa; height:3em; border:1px solid #cccccc; border-radius:4px; -moz-border-radius: 4px "> </p> 
   <p></p> 
   <p>Lorem ipsum d<br> <input name="first_name" type="text" size="34" style="background-color:#fafafa; height:3em; border:1px solid #cccccc; border-radius:4px; -moz-border-radius: 4px"> </p> 
   <p></p> 
   <input id="IBNSubscribeButton" type="button" value="SUBSCRIBE!" style="font:Proxima Nova; font-size:13px; letter-spacing: 1px; color: #FFFFFF; font-weight: bold; background-color: #faac44; width: 11em; height: 4em; border-radius:4px; -moz-border-radius: 4px; border:none"> 
   <span id="IBNStatusMessage"></span> 
  </form>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper molestie lacu 
  <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morb 
  <form id="IBNSubscribeForm" accept-charset="UTF-8" action="" class="fade"> 
   <p>Lorem ip<br> <input id="my" type="email" name="email" value="" placeholder="name@xyz.com" size="34" style="background-color:#fafafa; height:3em; border:1px solid #cccccc; border-radius:4px; -moz-border-radius: 4px "> </p> 
   <p></p> 
   <p>Lorem ipsum d<br> <input name="first_name" type="text" size="34" style="background-color:#fafafa; height:3em; border:1px solid #cccccc; border-radius:4px; -moz-border-radius: 4px"> </p> 
   <p></p> 
   <input id="IBNSubscribeButton" type="button" value="SUBSCRIBE!" style="font:Proxima Nova; font-size:13px; letter-spacing: 1px; color: #FFFFFF; font-weight: bold; background-color: #faac44; width: 11em; height: 4em; border-radius:4px; -moz-border-radius: 4px; border:none"> 
   <span id="IBNStatusMessage"></span> 
  </form>  
 </body>
</html>

Related Tutorials