I have an input in div. When this input is clicked, the focus of the div is disappear. How can I prevent this?
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<style>
.form:focus
{
outline: none;
border:1px solid black;
}
.form:active
{
outline: none;
border:1px solid black;
}
</style>
<div class="form" style="padding:50px" tabIndex="1">
<input type="text" />
</div>
</body>
</html>You just have to use :focus-within pseudo-class. This matches an element if the element or any of its descendants are focused.
.form:focus-within {
outline: none;
border: 1px solid black;
}<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div class="form" style="padding:50px" tabIndex="1">
<input type="text" />
</div>
</body>
</html>