Внешний вид HTML формы можно значительно улучшить с помощью CSS стиля:
Добавить стиль поля ввода
Используя CSS свойство width для определения ширины поля ввода:
input
{
width: 100%;
}
Попробуйте сами »
Пример относится ко всем элементам <input>. Если вы хотите только установить стиль определенного типа ввода, можно использовать селектор и атрибуты:
input[type=text]- будут выбраны только текстовые поляinput[type=password]- будет выбирано только поля пароляinput[type=number]- будут выбраны только числовые поля- и т.д...
Добавить поле ввода
Использовать CSS свойство padding для добавления пространства внутри текстового поля.
Совет: Если у вас есть много вводов друг за другом, Вы можете также добавить margin, чтобы было больше места за пределами:
input[type=text]
{
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
Попробуйте сами »
Обратите внимание, что мы установили свойство box-sizing к border-box. Это гарантирует, что заполнение в конечном итоге границы включены в общюю ширину и высоту элементов.
Подробнее о свойстве box-sizing в главе CSS Стили Бокс.
Добавить границы поля ввода
Использовать CSS свойство border для изменения размера и цвета границы, и CSS свойство border-radius для добавления закругленных углов:
input[type=text]
{
border: 2px solid red;
border-radius: 4px;
}
Попробуйте сами »
Если вам нужна только нижняя граница, используйте CSS свойство border-bottom:
input[type=text]
{
border: none;
border-bottom: 2px solid red;
}
Попробуйте сами »
Добавить цвет поля ввода
Использовать CSS свойство background-color для цвета фона ввода, CSS свойство color для добавления изменение цвета текста:
input[type=text]
{
background-color: #3CBC8D;
color: white;
}
Попробуйте сами »
Добавить фокус поля ввода
По умолчанию некоторые браузеры добавляют синий контур вокруг ввода, когда он получает фокус (щелчок мышью). Это поведение можно удалить, добавив outline: none; в input.
Использовать CSS селектор :focus, чтобы поле ввода, получил фокус:
input[type=text]:focus
{
background-color: lightblue;
}
Попробуйте сами »
input[type=text]:focus
{
border: 3px solid #555;
}
Попробуйте сами »
Добавить иконку поля ввода
Если вы хотите установить иконку внутри ввода, используйте CSS свойство background-image и расположите его в CSS свойстве background-position. Также обратите внимание, что мы добавили padding-left для резервирования места иконки:
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%;
}
Попробуйте сами »
Добавить стиль textarea
Совет: Использовать CSS свойство 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[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 пикселей в ширину, сделайте два столбца стек друг к другом, а не друг на друга
Продвинутый: В следующем примере медиа запросы создать отзывчивую форму. Вы узнаете больше об этом в следующей главе.