The :focus-within pseudo-class is a selects an element that consists of a focused element as a child. The CSS rules are applied when any child element gets focus. Example includes clicking a link, selecting an input, etc.
Syntax:
:focus {
/* CSS Properties */
}Example: Below is the example which illustrates the use of :focus-within pseudo-class Selector.
HTML
<!DOCTYPE html><html lang="en">
<head>
<style>
form {
border: 2px solid red;
padding: 15px;
width: 30%;
}
form:focus-within {
background: #ff8;
color: black;
}
input {
margin: 5px;
}
</style>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<form>
<label>Geek 1</label>
<input type="text">
<br>
<label>Geek 2</label>
<input type="text">
</form>
</body>
</html>
|
Output:
Supported Browsers:
- Google Chrome 60+
- Edge 79+
- Firefox 52+
- Opera 47+
- Safari 10.1+