Applying CSS style to input text box when it has focus - HTML CSS HTML Tag

HTML CSS examples for HTML Tag:input text

  1. HOME
  2. HTML CSS
  3. HTML Tag
  4. input text

Description

Applying CSS style to input text box when it has 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">
.search button {<!--  ww  w. j  ava2 s  .c  o  m-->
   display:none;
}

.search input:focus + button {
   display:block;
}

.search button:hover,
.search button:focus {
   display:block;
}
</style> 
 </head> 
 <body> 
  <div class="search"> 
   <input type="text" placeholder="Search..."> 
   <button type="submit">Search</button> 
  </div>  
 </body>
</html>

Related Tutorials