2

Есть элемент с иконкой search от font-awesome, который пропадает при получении фокуса, и вместо него появляется поле поиска. Но ввести текст не удаётся: иконка теряет фокус, и поле ввода сворачивается.

Каким образом можно ввести текст в поле?

* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  box-sizing: border-box;
}

.clear,
.clear:before,
.clear:after {
  content: "";
  display: block;
  clear: both;
}

header {
  width: 100%;
  height: 50px;
  background: red;
  line-height: 50px;
  text-transform: uppercase;
}

h1 {
  font-size: 24px;
}

header .name {
  float: left;
}

header .search {
  float: right;
  width: 50px;
  height: 50px;
  background: #fff;
  outline: none;
  overflow: hidden;
  text-align: center;
  transition: .2s linear;
}

.search:focus {
  width: 300px;
}

.fa-search {
  vertical-align: middle;
  font-size: 30px;
}

.search:focus>.fa-search {
  display: none;
}

.insearch {
  display: block;
  width: 400px;
  height: 50px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<header class="clear">
  <div class="name">
    <h1>kinOblomoff.net</h1>
  </div>
  <div class="search" tabindex="-1">
    <i class="fa fa-search"></i>
    <form action="">
      <input type="search" placeholder="Введите фразу для поиска" class="insearch" tabindex="-2">
    </form>
  </div>
</header>

1
  • пример смотреть на полном экране : мобильную версию ни делал ещё
    – user33274
    10 сен 2017 в 4:51

1 ответ 1

2

Если связать между собой метку label и поле input, то метка будет передавать фокус полю ввода. Есть два способа это сделать:

  1. расположить input внутри label;
  2. добавить полю идентификатор id, а метке — атрибут for.

Используем второй способ, потому что нам нужно показывать поле и метку по очереди, а не одновременно.

И расположим метку сразу после поля, чтобы задавать её стиль через соседние селекторы.

<input class="search__control" id="search" type="text" placeholder="Search">
<label class="search__label" for="search"><i class="fa fa-search"></i></label>

Работает это так:

  1. Сначала показываем только метку, а поле прячем с помощью width: 0; и прозрачных границ. Чтобы пользователю было понятнее, чего от него ждут, превращаем курсор над меткой в тыкающий перст.
  2. Когда пользователь нажимает на иконку, фокус достаётся полю, — благодаря его связи с меткой. Пользуемся этим, чтобы поменять стили поля через псевдокласс :focus. А до стилей метки добираемся через соседние селекторы:
.search__control:focus {
  ...
}
.search__control:focus + .search__label {
  ...
}

Получится, например, так: https://codepen.io/glebkema/pen/gxVvqG

.sitename {
  float: left;
}
.search {
  float: right;
}
.search__control {
  border: 1px solid transparent;
  width: 0;
  -webkit-transition: all .4s ease;
     -moz-transition: all .4s ease;
      -ms-transition: all .4s ease;
       -o-transition: all .4s ease;
          transition: all .4s ease;
}
.search__control:focus {
  border-color: black;
  outline: none;
  width: 120px;
}

.search__label {
  cursor: pointer;  
  float: left;
}
.search__control:focus + .search__label {
  display: none;
}
<header>
  <div class="sitename">Site Name</div>
  <div class="search">
    <form action="">
      <input class="search__control" id="search" type="text" placeholder="Search">
      <label class="search__label" for="search"><i class="fa fa-search"></i></label>
    </form>
  </div>
</header>

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

6
  • @МаксимЛенский В этом ответе делал вариант с перекрашиванием иконки и постепенным появлением поля поиска. Может быть, пригодится как идея. 10 сен 2017 в 5:21
  • Не понятно как это работает ... каким образом label привязан к input ?
    – user33274
    10 сен 2017 в 5:50
  • Есть два способа: когда input внутри label и когда им добавлены атрибуты (инпуту id, а лейблу for). Здесь использован второй, чтобы менять стиль лейбла через соседние селекторы. 10 сен 2017 в 5:53
  • для меня именно эта тема была всегда не понятной , спс за пояснения буду работать над этим ...
    – user33274
    10 сен 2017 в 5:57
  • Gleb о меня дошло как ... спасибо огромное
    – user33274
    10 сен 2017 в 6:49

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.