CSS- формы
Внешний вид HTML-формы можно значительно улучшить с помощью CSS:
Стилизация полей ввода
Используйте 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. Это гарантирует, что отступы и, в конечном итоге, границы включены в общую ширину и высоту элементов.
Подробнее об этом box-sizingсвойстве читайте в главе « Размеры блоков CSS» .
Входы с границами
Используйте 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свойство CSS для анимации ширины ввода поиска, когда он получает фокус. Вы узнаете больше об этом
transitionсвойстве позже, в нашей главе « Переходы CSS ».
Пример
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: #4CAF50;
border:
none;
color: white;
padding:
16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
/* Tip: use width: 100% for full-width buttons */
Для получения дополнительной информации о том, как стилизовать кнопки с помощью CSS, прочитайте наш учебник по кнопкам CSS .
Отзывчивая форма
Измените размер окна браузера, чтобы увидеть эффект. Если ширина экрана меньше 600 пикселей, расположите два столбца друг над другом, а не рядом друг с другом.
Дополнительно: в следующем примере медиа-запросы используются для создания адаптивной формы. Вы узнаете больше об этом в следующей главе.