Стилизация форм

При помощи CSS можно качественно улучшить внешний вид HTML форм:

Отправить

Стилизация полей ввода

Для определения ширины поля ввода можно использовать свойство width:


input {
  width: 100%;
}

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

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

Промежутки у полей ввода

Чтобы добавить дополнительные промежутки внутри поля ввода, используйте свойство padding.

Когда в форме много полей ввода, идущих друг за другом, также может потребоваться использовать свойство margin, чтобы добавить дополнительные отступы снаружи поля ввода:


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

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

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

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

Поля ввода в фокусе

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

Чтобы определить какой-нибудь свой стиль для поля ввода, находящегося в фокусе, используйте псевдокласс :focus:


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



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

Поле ввода с иконкой/изображением

Если вы хотите внутри поля ввода разместить иконку, то используйте свойство background-image. Позиционировать ее можно при помощи свойства background-position. Также, обратите внимание, что мы добавляем большой отступ слева, чтобы зарезервировать место для иконки:


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

Анимированное поле ввода

В следующем примере мы используем свойство transition, чтобы добавить анимацию на изменение ширины поля ввода, когда оно получает фокус:


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

input[type=text]:focus {
  width: 100%;
}

Стилизация области ввода

Чтобы запретить изменять размер области текстового ввода (отключить "захват" в левом нижнем углу), используйте свойство resize:


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: #04AA6D;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}

Чтобы ширина кнопки была во весь экран, используйте width: 100%;.