Change style of focused input

Changing active input by few styles, using methods first-child, nth-child and simple focus. We use for third input nth-child(5), because there are
elements which count. 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
input:focus {
color:white;
background-color:darkgrey;
}
form div input:first-child:focus {
color:white;
background-color:black;
}
form div input:nth-child(5):focus {
color:white;
background-color:lightgrey;
}
</style>

</head>
<body>
	<p>Press an input to see effect</p>
<form>
<div>
	<input type="text" value="First name"><br />
	<input type="text" value="Last name"><br />
	<input type="text" value="e-mail"><br />
</div>
</form>
</body>
</html>
List

Responses

0 Replies