I want to fade the whole background on focus

Question

I want to fade the whole background on focus the search field. I need only css, If there is a way please let me know I am stuck here for 2 days.

Answer 1

There are so many ways this can be done:

1) Use jQuery to add this class when the search field has focus:

.fader {
    opacity: .5;
    -webkit-transition: opacity .25s ease-in-out;
       -moz-transition: opacity .25s ease-in-out;
            transition: opacity .25s ease-in-out;
}

2) Use jQuery to apply this method when the search field has focus:

$("body").fadeOut(2500); // the higher the number the longer it takes to fade

Note for IE 8 compatibility: Use opacity: 0.5; filter: alpha(opacity=50);