Home/ Questions/Q 8136475
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T10:46:22+00:00

<!doctype html> <html lang=en> <head> <meta charset=utf-8/> <style> form:focus{ background:red; } </style> <title>Home, sweet

  • 0
<!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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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 🙂

    • 0