Try it Live - Styling input on focus

<!DOCTYPE html>
<html>
<head>
<style>
     form {
      background-color:gray;
      padding: 15px;
      color: white;
      border:5px solid gold;
     }      
     input {
      padding:10px;
      margin:5px;
     }
     input:focus {
      background: gold;
      color: brown;
      font-size:24px;
     }
     input[type=color]:focus {
       border:2px solid black;
     }	 	 
     input:hover {
       width:250px;
     }
     input:active {
       background: lightgreen;
     }
   </style>
</head>
<body>
<h2>Example for input: focus, input: hover, and input:active</h2>
<p> <b>input: focus</b> - Input field color changes to gold when we click on it</p>
<p> <b>input: hover</b> - When you hover input field, width increases</p>
<p> <b>input: active</b> - When you click on input field it changes background color to lightgreen for milliseconds at the exact time when you click</p>
<form>
First Name: <input type="text" name="firstname">
<br>
<br>
Last Name: <input type="text" name="lastname">
<br>
<br>
Select color: <input type="color" name="selColor" value="#00ffff">
</form>
</body>
</html>