Css для окна ввода

CSS Формы

Внешний вид HTML формы можно значительно улучшить с помощью CSS:

Стили полей ввода

Использовать свойство width для определения ширины поля ввода:

Пример

Пример относится ко всем элементам . Если вы хотите только установить стиль определенного типа ввода, можно использовать селекторы атрибутов:

• input[type=text] — будут выбраны только текстовые поля
• input[type=password] — будет выбирано только поля пароля
• input[type=number] — будут выбраны только числовые поля
• и т.д.

Дополнительные вводы

Использовать свойство padding для добавления пространства внутри текстового поля.

Совет: Если у вас есть много вводов друг за другом, Вы можете также добавить margin , чтобы было больше места за пределами:

Пример

Обратите внимание, что мы установили свойство 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 пикселей в ширину, сделайте два столбца стек друг к другом, а не друг на друга

Продвинутый: В следующем примере медиа запросы создать отзывчивую форму. Вы узнаете больше об этом в следующей главе.

Aligned Form

An example of how to style labels together with inputs to create a horizontal aligned form:

Пример

Мы только что запустили
SchoolsW3 видео

Сообщить об ошибке

Если вы хотите сообщить об ошибке или внести предложение, не стесняйтесь отправлять на электронное письмо:

Ваше предложение:

Спасибо Вам за то, что помогаете!

Ваше сообщение было отправлено в SchoolsW3.

ТОП Учебники

ТОП Справочники

ТОП Примеры

SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, Cookies и политика конфиденциальности.

Источник

Стилизация форм

При помощи CSS можно качественно улучшить внешний вид HTML форм:

Стилизация полей ввода

Для определения ширины поля ввода можно использовать свойство width :

В приведенном выше примере стили будут применяться ко всем элементам . Если же вам нужно настроить стили для поля ввода определенного типа, то вы можете использовать селекторы атрибутов:

• input[type=text] — выберет только текстовые поля ввода
• input[type=password] — выберет только поля ввода паролей
• input[type=number] — выберет только цифровые поля ввода
• и так далее..

Промежутки у полей ввода

Чтобы добавить дополнительные промежутки внутри поля ввода, используйте свойство padding .

Когда в форме много полей ввода, идущих друг за другом, также может потребоваться использовать свойство margin , чтобы добавить дополнительные отступы снаружи поля ввода:

Обратите внимание, что мы установили для свойства box-sizing значение border-box . Это сделано для того, чтобы промежутки и рамки включались в ширину и высоту элементов.

Поля ввода с рамкой

Чтобы изменить цвет и размер рамки поля ввода, используйте свойство border . Для добавления закругленных углов, используйте свойство border-radius :

Если вы хотите, чтобы рамка была только снизу поля ввода, то используйте свойство border-bottom :

Цветные поля ввода

Чтобы добавить фоновый цвет для поля ввода, используйте свойство background-color . Чтобы изменить цвет текста в поле ввода, используйте свойство color :

Поля ввода в фокусе

По умолчанию, некоторые браузеры добавляют синюю внешнюю рамку вокруг поля ввода, когда оно получает фокус (пользователь кликает на него). Вы можете убрать такое поведение добавив для поля ввода свойство outline: none; .

Чтобы определить какой-нибудь свой стиль для поля ввода, находящегося в фокусе, используйте псевдокласс :focus :

Поле ввода с иконкой/изображением

Если вы хотите внутри поля ввода разместить иконку, то используйте свойство background-image . Позиционировать ее можно при помощи свойства background-position . Также, обратите внимание, что мы добавляем большой отступ слева, чтобы зарезервировать место для иконки:

Анимированное поле ввода

В следующем примере мы используем свойство transition , чтобы добавить анимацию на изменение ширины поля ввода, когда оно получает фокус:

 input[type=text] < transition: width 0.4s ease-in-out; >input[type=text]:focus

Стилизация области ввода

Чтобы запретить изменять размер области текстового ввода (отключить «захват» в левом нижнем углу), используйте свойство resize :

Стилизация меню выбора

Стилизация кнопок ввода

 input[type=button], input[type=submit], input[type=reset]

Чтобы ширина кнопки была во весь экран, используйте width: 100%; .

Источник