Формы CSS

Используя CSS, можно значительно улучшить вид HTML-формы:

Попробуйте сами

установите стиль поля ввода

使用 width свойство для определения ширины поля ввода:

实例

input {
  width: 100%;
}

Попробуйте сами

Этот пример действует для всех элементов <input>. Если нужно установить стиль только для определенного типа ввода, можно использовать селектор свойств:

  • input[type=text] - выбирает только поля ввода с текстом
  • input[type=password] - выбирает только поля ввода с паролями
  • input[type=number] - выбирает только поля ввода с числами
  • и т.д...

заполнение поля ввода

使用 padding свойство добавляет пространство внутри текстового поля.

提示：Если много полей ввода, возможно, вам также потребуется добавить внешние поля, чтобы добавить больше места вокруг них:

实例

input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}

Попробуйте сами

Обратите внимание, что мы установили box-sizing свойство установлено в border-boxТак это гарантирует, что общая ширина и высота элемента включают в себя внутренние поля (заполнение) и окончательные рамки.

Пожалуйста, в наших CSS Box Sizing в этой главе вы узнаете о box-sizing для получения дополнительной информации о свойстве.

поля ввода с рамкой

Используйте border свойство для изменения толщины и цвета рамки, и используя border-radius свойство для добавления скругленных углов:

实例

input[type=text] {
  border: 2px solid red;
  border-radius: 4px;
}

Попробуйте сами

Если вам нужно только нижний край, используйте border-bottom Свойство:

实例

input[type=text] {
  border: none;
  border-bottom: 2px solid red;
}

Попробуйте сами

цветные поля ввода

Используйте background-color свойство для добавления фона к полю ввода, и используя color свойство для изменения цвета текста:

实例

input[type=text] {
  background-color: #3CBC8D;
  color: white;
}

Попробуйте сами

поля ввода, получившего фокус

По умолчанию, некоторые браузеры добавляют синий контур вокруг поля ввода при получении фокуса (клике). Вы можете изменить цвет текста в поле ввода, добавив в CSS-стиль поля ввода outline: none; чтобы消除此 поведение.

使用 :focus Выборка может определить стиль для поля ввода при получении фокуса:

实例 1

input[type=text]:focus {
  background-color: lightblue;
}

请在文本框中点击：

Попробуйте сами

实例 2

input[type=text]:focus {
  border: 3px solid #555;
}

请在文本框中点击：

Попробуйте сами

带有图标/图像的输入框

如果希望在输入框中包含图标，请使用 background-image 属性，并将其与 background-position 属性一起设置。还要注意，我们添加了一个较大的左内边距（padding-left）来留出图标的空间：

实例

input[type=text] {
  background-color: white;
  background-image: url('searchicon.png');
  background-position: 10px 10px; 
  background-repeat: no-repeat;
  padding-left: 40px;
}

Попробуйте сами

带动画效果的搜索输入框

在本例中，我们使用 CSS transition 属性为搜索输入框获得焦点时的宽度变化设置动画。稍后，您将在我们的 CSS переходы 一章中学到更多有关 transition 属性的知识。

实例

input[type=text] {
  transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
  width: 100%;
}

Попробуйте сами

设置文本域的样式

提示：使用 resize 属性可防止对 textareas 调整大小（禁用右下角的“抓取器”）：

实例

textarea {
  width: 100%;
  height: 150px;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
  resize: none;
}

Попробуйте сами

设置选择菜单的样式

实例

select {
  width: 100%;
  padding: 16px 20px;
  border: none;
  border-radius: 4px;
  background-color: #f1f1f1;
}

Попробуйте сами

设置输入按钮的样式

实例

input[type=button], input[type=submit], input[type=reset] {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}
/* Совет: используйте width: 100%, чтобы создать кнопку полного ширины */

Попробуйте сами

Для получения дополнительной информации о том, как устанавливать стили кнопок с помощью CSS, изучите наш CSS кнопки Учебник.

Адаптивное меню

Измените размер окна редактора TIY, чтобы увидеть эффекты. Когда ширина экрана меньше 600 пикселей, два столбца должны быть расположены вертикально, а не горизонтально.

Дополнительный уровень: следующие примеры используют Медиа-запросы Создайте адаптивную форму. В следующей главе вы узнаете больше о相关知识.

Просмотр адаптивного меню