CSS: Target body on Input:focus


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.


Problem courtesy of: iConnor


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"});
Solution courtesy of: Sandeep Raju Prabhakar


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

Discussion courtesy of: zakangelle

This recipe can be found in it's original form on Stack Over Flow.