Есть элемент с иконкой 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>