Возможности CSS для стилизации форм

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

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

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

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

input {

width: 100%;

}

В приведенном выше примере стили будут применяться ко всем элементам .

Для настройки стиля «Поле ввода» определенного типа, можно использовать селекторы атрибутов:

• input[type=text] - выберет только текстовые поля ввода
• input[type=text] - выберет только текстовые поля ввода
• input[type=text] - выберет только текстовые поля ввода
• input[type=text] - выберет только текстовые поля ввода
• input[type=text] - выберет только текстовые поля ввода

• input[type=password] - выберет только поля ввода паролей
• input[type=password] - выберет только поля ввода паролей
• input[type=password] - выберет только поля ввода паролей
• input[type=password] - выберет только поля ввода паролей
• input[type=password] - выберет только поля ввода паролей

• input[type=number] - выберет только цифровые поля ввода
• input[type=number] - выберет только цифровые поля ввода
• input[type=number] - выберет только цифровые поля ввода
• input[type=number] - выберет только цифровые поля ввода
• 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] {

padding: 16px 32px;

background-color: #04AA6D;

text-decoration: none;

border: none;

margin: 4px 2px;

color: white;

cursor: pointer;

}

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