У меня есть панель поиска с иконкой поиска в крайнем левом углу, как показано здесь на скрипке и на снимок экрана ниже.
Коды HTML и CSS, которые я использовал для создания значка поиска и квадратной границы:
HTML:
<form class="back">
<span class="fa fa-search searchicon" aria-hidden="true">
</span>
<input type="text" name="search" class="extand ">
</form>
CSS:
.back{
padding: 0.5%;
background: #10314c;
}
.searchicon {
float: left;
margin-top: -20px;
position: relative;
top: 26px;
left: 8px;
color: white;
z-index: 2;
}
.extand {
width: 2.4%;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background: #10314c;
background-position: 10px 10px;
background-repeat: no-repeat;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
.extand-now {
width: 50%;
}
Постановка задачи:
Если я нажму на значок поиска, маленький квадратный ящик ввода (отмеченный стрелкой на снимке экрана), окружающий значок поиска, должен расширяться, как здесь.
Вот моя обновленная скрипка, которая работает почти правильно, но эти две вещи я не могу понять, как это сделать:
- Квадратный ящик должен вернуться в исходное положение после удара куда угодно.
- Когда граница белого квадрата расширяется, внутренний фон должен быть белым.
Любые мысли о том, как это можно сделать?
