CSS Формы
Внешний вид HTML-формы может быть значительно улучшен с помощью CSS:
Стилизация полей ввода (input)
Используйте свойство width чтобы определить ширину поля ввода:
Приведенный выше пример относится ко всем элементам <input>. Если вы хотите стилизовать только определенный тип ввода, вы можете использовать атрибуты селекторов:
input[type=text]- выберет только текстовые поляinput[type=password]- выберет только поля пароляinput[type=number]- выберет только числовые поля- и т.д.
Пространство внутри и снаружи поля Input
Используйте свойство padding чтобы добавить пространство внутри текстового поля.
Совет: Если у вас много полей input, следующих друг за другом, вы также можете добавить немного margin, чтобы добавить больший отступ между ними:
Пример
input[type=text]
{
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
Попробуйте сами »
Обратите внимание, что мы установили свойство box-sizing на border-box. Это гарантирует, что отступы и в конечном итоге границы включены в общую ширину и высоту элементов.
Вы можете узнать больше о свойстве box-sizing в разделе CSS Размер блока на нашем сайте W3Schools на русском.
Поля Input с границами
Используйте свойство border чтобы изменить размер и цвет границы, и используйте свойство border-radius, чтобы добавить округлые углы:
Если необходимо отобразить только нижнюю границу, используйте свойство border-bottom:
Цветные поля Input
Используйте свойство background-color, чтобы добавить цвет фона для input, и свойство color чтобы изменить цвет текста:
Фокусированные поля Input
По умолчанию некоторые браузеры добавляют синий контур вокруг ввода, когда он получает фокус (нажатие). Вы можете удалить это поведение, добавив outline: none; к данным input.
Используйте селектор :focus чтобы сделать что-то с полем input, когда он получает фокус:
Input с иконкой/изображением
Если необходима иконка внутри input, используйте свойство background-image и
расположите его с помощью свойства background-position. Также обратите внимание, что мы добавили большой левый отступ (padding), чтобы зарезервировать пространство для иконки:
Пример
input[type=text]
{
background-color: white;
background-image: url('../images/searchicon.png');
background-position: 10px 10px;
background-repeat:
no-repeat;
padding-left: 40px;
}
Попробуйте сами »
Анимированный поиск Input
В этом примере мы используем CSS свойство transition чтобы анимировать ширину поискового ввода, когда он получает фокус. Подробнее о свойстве transition вы узнаете позже в главе CSS Переходы на нашем сайте W3Schools на русском.
Пример
input[type=text] {
-webkit-transition: width 0.4s
ease-in-out;
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}
Попробуйте сами »
Стилизация поля Textarea
Совет: Используйте свойство 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
Пример
select
{
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
}
Попробуйте сами »
Стилизация кнопок Input
Пример
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 Кнопки на нашем сайте W3Schools на русском.
Адаптивная форма
Измените размер окна браузера, чтобы увидеть эффект. Если ширина экрана меньше 600 пикселей, расположите два столбца друг над другом, а не рядом друг с другом.
Дополнительно: В следующем примере используется медиа запрос для создания адаптивной формы. Вы узнаете больше об этом в следующей главе.
