css

Focus within an element

Styling when focus is inside an element using the :focus-within pseudo-class.

How does that work?

The :focus-within pseudo-class lets you style a container when any descendant has focus, without extra classes or IDs.

<div class="container">
	<input type="text" placeholder="Focus on me" />
</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;
}