As when clicking or entering text in the search form, add the css class .active to #container , and then when you click on any place outside the search field, delete the css class .active ?

 $("#search").click(function() { $('#container').addClass('active'); }); $("#bloc_index").click(function() { $("#container").removeClass('active'); }); 
 html, body { height: 100%; } html, body { margin: 0px; padding: 0px; background-color: #FFF; } :focus { outline: 0; } #bloc_index { position: relative; overflow: auto; } #container { width: 100%; height: 600px; margin-top: 0px; padding: 0px 20px; color: #555; font: 18px Arial, Helvetica; font-weight: bold; } #header { width: 100%; height: 60px; background-color: #777; text-align: center; } #form { background-color: #444; width: 500px; padding: 8px 0px; } .active { background-color: #999; opacity: 0.6; } .searchInput { background-color: #FFFFFF; font: bold 17px Arial, Helvetica; color: #777; margin-left: 0px; height: 40px; width: 330px; border-radius: 3px; border: 1px solid #ccc; padding: 0px 10px; color: #a6a6a6; box-shadow: 0px 0px 2px gray; } .searchInput:focus { border-color: #6699cc; box-shadow: 0px 0px 6px #333; color: #333; } #sumbit { border: 1px solid #00748f; height: 40px; width: 120px; padding: 0; cursor: pointer; font: bold 15px Arial, Helvetica; color: #fafafa; text-transform: uppercase; background-color: #0483a0; background-image: -webkit-gradient(linear, left top, left bottom, from(#31b2c3), to(#0483a0)); background-image: -webkit-linear-gradient(top, #31b2c3, #0483a0); background-image: -moz-linear-gradient(top, #31b2c3, #0483a0); background-image: -ms-linear-gradient(top, #31b2c3, #0483a0); background-image: -o-linear-gradient(top, #31b2c3, #0483a0); background-image: linear-gradient(top, #31b2c3, #0483a0); border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; text-shadow: 0 1px 0 rgba(0, 0, 0, .3); -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff; -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #555; } #futer { width: 100%; height: 60px; color: #555; font: 18px Arial, Helvetica; font-weight: bold; background-color: #777; position: relative; margin-top: 0px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="header"> <form id="form" action="" method="post"> <input class="searchInput" type="text" id="search" name="search" autocomplete='off' /> <input type="submit" value="Найти" id="sumbit" name="sub" /> </form> </div> <div id="bloc_index"> <div id="container"> <br> <br> <br>Здесь много текста, фото и так далее... <br> <br> <br> </div> <div id="futer"></div> </div>

    1 answer 1

    You can, for example, like this

     var $search = $('тут селектор поля для поиска'); $search.on('click', function () { $("#container").addClass('active'); }); $search.on('blur', function () { $("#container").removeClass('active'); });

    blur triggered when the element has lost focus (in this case they clicked not on the search)