Menu
<!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?
407
This is an older question, but as of now, some of the more popular browsers are supporting a css pseudo selector called :focus-within, which can style a form (without javascript) that has a focused input.
Here is the current support for the selector: http://caniuse.com/#search=focus-within
If you're using a supported browser, here is an example: https://codepen.io/jumprope-design/pen/LjxORX
126
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
