Tengo una entrada en div. Cuando se hace clic en esta entrada, el foco del div desaparece. ¿Cómo puedo prevenir esto?
<!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>Solo tienes que usar :focus-within pseudo-class. Esto coincide con un elemento si el elemento o cualquiera de sus descendientes están enfocados.
.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>