CSS Формы
Внешний вид HTML формы можно значительно улучшить с помощью CSS:
Стили полей ввода
Использовать свойство width для определения ширины поля ввода:
Пример относится ко всем элементам <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 для добавления закругленных углов:
Если вам нужна только нижняя граница, используйте свойство border-bottom:
Цвет ввода
Использовать свойство background-color цвета фона ввода,
свойство color для добавления изменение цвета текста:
Фокус ввода
По умолчанию некоторые браузеры добавляют синий контур вокруг ввода, когда он получает
фокус (щелчок мышью). Это поведение можно удалить, добавив outline: none; в input.
Использовать селектор :focus, чтобы поле ввода, получил фокус:
Ввод иконка и изображение
Если вы хотите установить иконку внутри ввода, используйте свойство 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;
}
Попробуйте сами »
Трансформация поиска ввода
В данном примере мы используем CSS свойство transition оживить
ширину поискового ввода, когда он получает фокус. Вы узнаете больше о свойствах
transition позже, в нашей главе CSS Трансформация.
Пример
input[type=text] {
-webkit-transition: width 0.4s
ease-in-out;
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% для кнопок полной ширины */
Попробуйте сами »
Для получения дополнительной информации о том, как стилизовать кнопки с помощью CSS, прочитайте наш CSS Кнопки Учебник.
Отзывчивая форма
Измените размер окна браузера, чтобы увидеть эффект. Когда экран меньше чем 600 пикселей в ширину, сделайте два столбца стек друг к другом, а не друг на друга
Продвинутый: В следующем примере медиа запросы создать отзывчивую форму. Вы узнаете больше об этом в следующей главе.