Как создать эффект кнопки поиска без использование css:focus-а?

224

20 мая 2018, 11:20

Есть кнопка поиска который при фокусе плавно увеличивается ширина.

Проблема в том что этот фокус ломает мне верстку то есть это кнопка будет в шапке а слева от него будут элементы навигации.У него есть лишнее 200px пространства который он будет занимать при увеличении.

Нужно чтобы при клике на эти лишние 200 пикселей фокус не срабатывал а сработал при клике только на сам круг.

codepen ссылка

Посмотрите на codepen тут особо не заметите (чтобы увидить надо кликать дважды) эту проблему при клике с лева от input фокус срабатывает.

Kак это можно пофиксить или же написать с помощью JS такое которое при клике на input будет работать а при клике на другое место кроме input-а будет закрыватсья

document.addEventListener("touchstart", function(){}, true);

body { 
  margin: 5%; 
} 
 
.search-box { 
  transition: width 0.6s, border-radius 0.6s, background 0.6s, box-shadow 0.6s; 
  width: 40px; 
  height: 40px; 
  border-radius: 20px; 
  border: none; 
  cursor: pointer; 
  background: #ebebeb; 
} 
.search-box + label .search-icon { 
  color: black; 
} 
.search-box:hover { 
  color: white; 
  background: #c8c8c8; 
  box-shadow: 0 0 0 5px #3d4752; 
} 
.search-box:hover + label .search-icon { 
  color: white; 
} 
.search-box:focus { 
  transition: width 0.6s cubic-bezier(0, 1.22, 0.66, 1.39), border-radius 0.6s, background 0.6s; 
  border: none; 
  outline: none; 
  box-shadow: none; 
  padding-left: 15px; 
  cursor: text; 
  width: 300px; 
  border-radius: auto; 
  background: #ebebeb; 
  color: black; 
} 
.search-box:focus + label .search-icon { 
  color: black; 
} 
.search-box:not(:focus) { 
  text-indent: -5000px; 
} 
 
#search-submit { 
  position: relative; 
  left: -5000px; 
} 
 
.search-icon { 
  width: 15%; 
  position: relative; 
  left: -32px; 
  bottom: 2px; 
  cursor: pointer; 
}

<form class="search-container" action="//llamaswill.tumblr.com/search"> 
  <input id="search-box" type="text" class="search-box" name="q" /> 
  <label for="search-box"><img class="search-icon" src="https://cdn4.iconfinder.com/data/icons/vectory-bonus-3/40/search_1-128.png"></label> 
  <input type="submit" id="search-submit" /> 
</form>