Как сделать затемнение фона при активной форме?

Question

[Ilya Kuminov]

Когда вы находитесь в активном состоянии, то есть нажимаете на форму, то задний фон затемняется, в качестве примера ya.ru

Answer 1

[Александр]

Вы можете использовать DevTools для того, чтобы понять как это сделано. А на предложенной странице просто меняется цвет фона с белого на rgba(31, 31, 32, 0.22) при нажатии на строку поиска.

Answer 2

[Noder SS]

можете попробовать на событие focus к форме делать определенные дейсвия, могу сверстать лайт версию

Comments

[Ilya Kuminov]

Спасибо за ответ, не нужно, я уже запилил)

[Ilya Kuminov]

Я попробовал, вариант рабочий на 50%, если задать, через focus то элемент который использует background, будет выделен. Есть еще какие-нибудь идеи ?

<!-- FOOTER  -->
<footer id="contacts">
  <div class="container">
    <div class="row">
      <div class="col-md-6 col-md-offset-3 text-center">
<!-- 		FORMS		 -->
			<form>
        <input class='bob' type="text" placeholder="Enter First Name"/><br>
				<button>Subscribe</button>
			</form>
      </div>
    </div>
  </div>
</footer>

input{
	margin:10rem;
}
input:focus{
	 box-shadow: rgba(0,0,0,.5) 0 0 0 10000px!important;
	  transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}

[deantek]

Ilya Kuminov, в разметке у яндекса все видно, там просто пустой div с классом overlay с position: fixed, если инпут в фокусе, то навешивается доп класс на оверлей, где меняется opacity

[Noder SS]

Ilya Kuminov, Событие фокус в JS