prevent parent element from to disappear focus when input is clicked

July 6, 2022

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>

>Solution :

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>