focus (:focus)

The :focus CSS pseudo-class is applied when a element has received focus, either from the user selecting it with the use of a keyboard or by activating with the mouse (e.g. a form input).

<!DOCTYPE html>
<html>
    <head>
        <style>
            .first-name:focus {
                color: red;
            } .last-name:focus {
                color: lime;
            }
        </style>
    </head>
    <body>
        <form action="#">
            <input class="first-name" value="red when focused">
			<input class="last-name" value="lime when focused">
        </form>
    </body>
</html>