Highlight active form with CSS?
css, focus, forms, html
Solution
This code works as an exercise but probably not a solution you should use. The version relying on `legend` actually seems acceptable.
There is no `form:focus` selector so I thought instead the individual `input:focus` could create the desired effect using pseudo-elements. However, pseudo-elements can only be used on elements with content, like if I were to replace `input[type=submit]` with `button`
form {
position:relative;
}
/*style the pseudo-element before a button that is a general sibling
of any element that currently has focus within a form*/
form *:focus~button:before{
content:"";display:block;background:red;
/*take up the entire space of the form*/
position:absolute;top:0;right:0;bottom:0;left:0;
/*but render behind its children*/
z-index:-1;
}
Fiddled, but it instantly looked pretty crazy, so I've refactored the solution to rely onto a `legend` element. Enjoy :)
Problem
``` <!doctype html> <html lang="en"> <head> <meta charset="utf-8"/> <style> form:focus{ background:red; } </style> <title>Home, sweet home</title> </head> <body> <form> <input type="text"/> <input type="submit"/> </form> <form> <input type="text"/> <input type="submit"/> </form> <form> <input type="text"/> <input type="submit"/> </form> </body> </html> ``` This obviously doesn't work, as is why I'm asking the question. How can I get the form which has one if it's inputs as the focus to highlight? That is, I want to be able to apply styles to the active FORM, not the active INPUT - is that doable without JS or something?