css

Focus in een element

Focus in een element met CSS met pseudo-klasse :focus-within.

Hoe werkt dat dan?

Focus in een element met CSS met pseudo-klasse :focus-within. Dit is handig om een element te stylen wanneer er in een element wordt gefocused, zonder dat er een extra class of id nodig is.

<div class="container">
	<input type="text" placeholder="Focus op mij" />
</div>

.container {
	padding: 60px;
	border-radius: 15px;
	background: darkgrey;
	border: 2px solid transparent;
}
.container input {
	width: 100%;
	padding: 10px;
	border-radius: 999px;
	border: none;
	outline: none;
}
.container:focus-within {
	background: green;
	border-color: limegreen;
}