CSS :focus-within Selector
Last Updated :
30 Aug, 2022
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+
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...