CSS Forms формы
Внешний вид HTML-формы можно значительно улучшить с помощью CSS:
Стилизация полей ввода
Используйте свойство width для определения ширины поля ввода:
Пример
input
{
width: 100%;
}
Приведенный выше пример применяется ко всем элементам <input>. Если требуется только стиль определенного типа ввода, можно использовать селекторы атрибутов:
input[type=text]- выберет только текстовые поляinput[type=password]- будет только выбрать поля пароляinput[type=number]- выберет только числовые поля- etc..
Мягкие входы
Используйте свойство padding для добавления пространства внутри текстового поля.
Совет: Когда у вас есть много входов друг за другом, вы также можете добавить некоторые margin, чтобы добавить больше места за пределами них:
Пример
input[type=text]
{
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
Обратите внимание, что мы установили свойство box-sizing в border-box. Это гарантирует, что заполнение и в конечном итоге границы включаются в общую ширину и высоту элементов.
Подробнее о box-sizing собственности в нашей CSS 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;
}
Анимированный поисковый ввод
В этом примере мы используем свойство 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: #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 кнопки справочник.
Адаптивная форма
Измените размер окна обозревателя, чтобы увидеть эффект. Когда экран меньше, чем 600px шириной, сделать два столбца стека друг на друга, а не рядом друг с другом.
Продвинутый: В следующем примере для создания адаптивной формы используются запросы мультимедиа. Вы узнаете больше об этом в более поздней главе.