Чтобы создать строку поиска в HTML и CSS, нужно использовать элемент input с атрибутом type=»text». Для стилизации строки поиска можно применить CSS-стили.
HTML:
<form>
<input type="text" placeholder="Поиск">
<button type="submit">Найти</button>
</form>
В этом примере мы создали форму с элементом input типа text и кнопкой для отправки данных поиска. Атрибут placeholder задает текстовую подсказку в строке поиска.
CSS:
form {
display: flex;
align-items: center;
}
input[type="text"] {
width: 200px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 6px;
font-size: 16px;
outline: none;
}
button[type="submit"] {
padding: 10px 20px;
background-color: #007bff;
border: none;
border-radius: 6px;
color: #fff;
font-size: 16px;
cursor: pointer;
margin-left: 10px;
}
В этом примере мы стилизовали элементы формы с помощью CSS. Свойство display: flex и align-items: center для формы устанавливают элементы формы по центру.
Стиль для элемента input[type=»text»] задает ширину 200px, отступы внутри элемента, границу и скругленные углы вокруг поля ввода. Свойство outline: none убирает обводку вокруг элемента при фокусировке.
Стиль для кнопки button[type=»submit»] задает отступы внутри кнопки, фон, границу и скругленные углы. Свойство color указывает цвет текста на кнопке, cursor: pointer делает курсор указателя при наведении на кнопку.
Общий результат – с помощью HTML и CSS мы создали строку поиска с удобной структурой и стилизацией.
