HTML Form How to - Highlight input when focused

Question

We would like to know how to highlight input when focused.

Answer


<html>
<!--   w ww .  ja  va2s .  c o  m-->
<head>
<title>CSS Example</title>
<style>
input {
  border: none;
  background-color: #dddddd;
}

input:focus {
  background-color: #c4c4c4;
}
</style>
</head>


<body>
  <form name="frmLogin" action="login.asp" method="post">
    User name <input type="text" name="txtUserName" /><br />
    <br /> Password <input type="password" name="pwdPassword" /><br />
    <br /> <input type="submit" value="Login" />
  </form>
</body>
</html>

The code above is rendered as follows: