CSS: Target body on Input:focus

Question

Ive been looking around but have had no luck is it possible (with css) to target the body tag on input:focus so for example when someone clicks on the input box i want the body to have background:red, im not sure if this is actually possible.

Thanks in advance.

Connor

[CSS Selector Level 4](http://dev.w3.org/csswg/selectors4/#subject) supports this, but no browser has implemented it (it hasn't even been finalized yet). — Joseph Silber, Feb 13 '13 at 16:32
What you're looking for is some kind of a parent selector. This question's answer should answer yours too: http://stackoverflow.com/a/1014958/262056 — Stephen, Feb 13 '13 at 16:32

score 4 · Answer 1 · answered Feb 13 '13 at 16:32

4

This will be possible in the future with the CSS4 parent selector, but for now you would have to use JavaScript.

answered Feb 13 '13 at 16:32

zakangelle

4,830
2
18
28

score 2 · Accepted Answer · answered Feb 13 '13 at 16:33

2

This is not possible with CSS. But it can be easily achieved with javascript / jQuery :)

This is how to do it in jQuery,

$("input[type=text]").focus(function() {
    $("body").css({"background-color" : "red"});
});

answered Feb 13 '13 at 16:33

Sandeep Raju Prabhakar

14,834
7
33
42

1

Don't forget to remove the color on blur! – Joseph Silber Feb 13 '13 at 16:34
Shame, Thanks though i will use this :) – iConnor Feb 13 '13 at 16:34
@JosephSilber oh yeah! :) – Sandeep Raju Prabhakar Feb 13 '13 at 16:34
@ConnorMiles if you found this useful, accept it as the answer so that people trying to answer will know that its solved! :) – Sandeep Raju Prabhakar Feb 13 '13 at 16:35
Yes, ok chill i had to wait ten mins before i could accept thats why i give you a +1 in the meantime, could you please explain how i would toggle this so that on unfocus remove css? – iConnor Feb 13 '13 at 16:58
@ConnorMiles you can use, `$("input[type=text]").blur(function() { $("body").css({"background-color" : "none"});});` to remove the color on `unfocus` or `blur` – Sandeep Raju Prabhakar Feb 13 '13 at 17:02
1

you can look up the documentation real quick in this site... http://dochub.io/ – Sandeep Raju Prabhakar Feb 13 '13 at 17:03
^^ Bookmarked Thanks :) – iConnor Feb 13 '13 at 17:11

CSS: Target body on Input:focus

2 Answers2