Оригинальная форма поиска на CSS
Всем привет, сегодня мы реализуем с Вами оригинальную форму поиска на CSS. Данную форму Вы сможете использовать в дальнейших ваших проектах или видоизменять ее, взяв лишь только основу. Форма будет состоять из текстового поля, куда мы должны вводить поисковый запрос и иконки изображения, отвечающего за кнопку поиска. Со структурой мы разобрались, осталось лишь реализовать ее. Приступим:
<html>
<head>
<title>Оригинальная форма на CSS</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" />
</head>
<body>
<div class="search">
<form name="search_form" method="get" action="#">
<input type="text" name="q" placeholder="поиск">
<input type="image" alt="Искать" src="images/icon-search.png">
</form>
</div>
</body>
</html>
А теперь оформляем форму при помощи стилей:
input[type="text"] {
border: 1px solid #99dfdb;
box-shadow: 0 1px 5px 3px #d1eff0 inset;
color: #000;
float: left;
padding: 5px 5px 5px 10px;
outline: none;
transition: width 1s;
width: 160px;
}
input[type="image"] {
margin: -4px 0 0 -18px;
}
input[type="text"]:focus {
width: 200px;
}
Вот мы и завершили реализацию нашей задачи. Давайте немного разберемся в ней.
Для текстового поля мы устанавливаем рамку определенного цвета, цвет текста внутри данного поля, внутреннюю тень, задаем обтекание
элементов слева, а также устанавливаем фиксированную ширину. Для поля с изображением мы задаем отступы, чтобы установить наше
изображение в нужное положение. И последним этапом при получении фокуса на текстовом поле, мы плавно изменяем ширину нашего поля.
На этом все сделано, и на ваших экранах должна получиться следующая форма.
И последнее в данном уроке, что необходимо Вам, это изображение, которое Вы можете взять прямо отсюда. А на этом можно завершать наш урок и прощаться с Вами. Успехов Вам, до скорых встреч!
