HTML Form How to - Create Pure CSS form hints

Question

We would like to know how to create Pure CSS form hints.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.help {<!--from  ww w .ja  v  a  2s .c om-->
  position: absolute;
  display: none;
  color: #ff9900;
}

.text-input:active+.help, .text-input:focus+.help {
  position: static;
  display: inline;
}
</style>
</head>
<body>
  <form action=#>
    <p>
      <label for=name>Name</label> 
      <input id=name type=text class=text-input> 
      <small class=help>First name or nickname</small>
    </p>
    <p>
      <label for=email>Email</label> 
      <input id=email type=email class=text-input> 
      <small class=help>We will not share your email address</small>
    </p>
  </form>
</body>
</html>

The code above is rendered as follows:

Answer 2


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
label {<!-- w  ww. j  a  v  a2  s . c  o  m-->
  display: block;
  font-weight: bold;
}

.help {
  /* Using display:none; would hide the text from screen-readers, hiding off-screen is more accessible. */
  position: absolute;
  left: -99999px;
}

.text-input:active+.help, .text-input:focus+.help {
  position: static;
}
</style>
</head>
<body>
  <form action=#>
    <p>
      <label for=name>Name</label> 
      <input id=name type=text
        class=text-input> 
      <small class=help>First name or
        nickname</small>
    </p>
    <p>
      <label for=email>Email</label> 
      <input id=email type=email
        class=text-input> 
      <small class=help>We will not
        share your email address</small>
    </p>
  </form>
</body>
</html>

The code above is rendered as follows: