CSS :focus-within pseudo class

CSSWeb DevelopmentFront End Technology

If we want to style a focused element’s parent, we use the CSS :focus-within pseudo-class.

The following examples illustrate CSS :focus-within pseudo-class.

Example

 Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
form {
   margin: 2%;
   padding: 2%;
   display: flex;
   flex-direction: column;
   background: thistle;
}
input {
   margin: 2%;
}
form:focus-within {
   background-color: burlywood;
   box-shadow: 0 0 12px rgba(0,0,0,0.6)
}
input:focus {
   box-shadow: 0 0 12px rgba(0,0,0,0.6)
}
</style>
</head>
<body>
<form>
<input type="text" placeholder="name"/>
<input type="email" placeholder="email"/>
</form>
</body>
</html>

Output

This will produce the following result −

Example

 Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
div {
   width: 40%;
   margin: 2%;
   padding: 2%;
   display: flex;
   flex-direction: column;
   background: lavenderblush;
}
div > * {
   margin: 2%;
}
div:focus-within {
   background-color: aliceblue;
   box-shadow: 0 0 12px rgba(0,0,0,0.6)
}
</style>
</head>
<body>
<div>
<textarea></textarea>
<button>Click</button>
</div>
</body>
</html>

Output

This will produce the following result −

raja
Published on 13-Mar-2021 11:59:42
Advertisements