Add hint to input box while having 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

Add hint to input box while having 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">

* {<!--   w  w  w.  ja va 2s. c  o  m-->
   box-sizing: border-box;
}
form {
   width: 320px;
   float: left;
   margin: 10px;
   background-color:black;
}
form > div {
   position: relative;
   overflow: hidden;
}
form input, form textarea {
   width: 100%;
   border: 1px solid grey;
   background: none;
   position: relative;
   top: 0;
   left: 0;
   z-index: 1;
   padding: 8px 12px;
   outline: 0;
}
form input:valid, form textarea:valid {
   background: white;
}
form input:focus, form textarea:focus {
   border-color: #f06d06;
}
form input:focus + label, form textarea:focus + label {
   background: #f06d06;
   color: black;
   font-size: 70%;
   padding: 1px 6px;
   z-index: 2;
   text-transform: uppercase;
}
form label {
   transition: background 0.2s, color 0.2s, top 0.2s, bottom 0.2s, right 0.2s, left 0.2s;
   position: absolute;
   color: #999;
   padding: 7px 6px;
}
form textarea {
   display: block;
   resize: vertical;
}
form.go-bottom input, form.go-bottom textarea {
   padding: 12px 12px 12px 12px;
}
form.go-bottom label {
   top: 0;
   bottom: 0;
   left: 0;
   width: 100%;
}
form.go-bottom input:focus, form.go-bottom textarea:focus {
   padding: 4px 6px 20px 6px;
}
form.go-bottom input:focus + label, form.go-bottom textarea:focus + label {
   top: 100%;
   margin-top: -16px;
}
input[type="reset"]{
   background-color:red;
}


      </style> 
 </head> 
 <body> 
  <form class="go-bottom"> 
   <h2>Contactos</h2> 
   <div> 
    <input id="name" name="name" type="text" required> 
    <label for="name">Name</label> 
   </div> 
   <div> 
    <input id="phone" name="phone" type="tel" required> 
    <label for="phone">E-mail</label> 
   </div> 
   <div> 
    <textarea id="message" name="phone" required></textarea> 
    <label for="message">Message</label> 
   </div> 
   <input type="submit" value="Send"> 
   <input type="reset" value="Clean"> 
  </form>  
 </body>
</html>

Related Tutorials