Чтобы создать строку поиска в 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 мы создали строку поиска с удобной структурой и стилизацией.