Внешний вид 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 собственности в нашей CSS3 Box Определение размера главы. |
|---|
Граничит Входы
Используйте border собственности , чтобы изменить размер и цвет границы, а также использовать border-radius свойство , чтобы добавить закругленные углы:
Если вы хотите только нижнюю границу, используйте border-bottom свойство:
Цветные входы
Используйте background-color свойство , чтобы добавить цвет фона на вход, и color свойство изменять цвет текста:
Входы Фокусированные
По умолчанию некоторые браузеры будут добавлять синий контур вокруг входа, когда он получает фокус (нажал на). Вы можете удалить это поведение путем добавления outline: none; на вход.
Используйте :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;
} Попробуй сам " Анимированные Поиск Входной
В этом примере мы используем CSS3 transition свойство анимировать ширину поля поиска , когда он получает фокус. Вы узнаете больше о transition собственности позже, в нашем CSS3 Transitions главе.
пример
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 Buttons Учебник .