27Для создания строки поиска в CSS можно использовать HTML-элемент input с атрибутом type="text".
<form>
<input type="text" placeholder="Поиск...">
<button type="submit">Найти</button>
</form>В этом примере мы использовали тег <form> для создания формы, содержащей строку поиска.
<input type="text"> создает текстовое поле для ввода данных, а атрибут placeholder="Поиск..." добавляет текст-подсказку в поле для ввода, которая появляется до того, как пользователь начнет вводить данные.
<button type="submit">Найти</button> создает кнопку для отправки формы.
Теперь мы можем добавить стили нашей форме, чтобы она выглядела как строка поиска.
form {
display: flex;
align-items: center;
}
input[type="text"] {
width: 220px;
height: 32px;
padding: 6px 12px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
margin-right: 10px;
}
button[type="submit"] {
background-color: #007bff;
color: white;
padding: 6px 12px;
border: none;
font-size: 16px;
border-radius: 4px;
cursor: pointer;
}
button[type="submit"]:hover {
background-color: #0069d9;
}Эти стили преобразуют нашу форму в строку поиска с текстовым полем и кнопкой поиска.
Установка display: flex; для элемента формы означает, что элементы формы, включая кнопку поиска, будут расположены в ряд.
align-items: center; позволит выровнять элементы формы по центру по вертикали.
width, height, padding и border-radius задают размер, отступы и скругления нашего текстового поля.
border задает рамку вокруг текстового поля.
font-size устанавливает размер шрифта в поле для ввода.
margin-right: 10px; задает отступ справа для текстового поля.
Для кнопки поиска применяются некоторые стили, такие как background-color, color, padding, border и border-radius, чтобы сделать ее стильной и привлекательной. cursor: pointer; указывает на то, что при наведении курсора на кнопку, курсор должен изменить свое состояние на указатель, подразумевающий, что пользователь может что-то кликнуть.
button[type="submit"]:hover добавляет стили, которые будут применяться при наведении на кнопку поиска. Кроме того, если вы хотите, чтобы поле для ввода активировалось по нажатию на любую его часть, вы можете добавить свойство cursor: text; для поля ввода.
