CSS-формы

Пример формы, мы используем CSS для визуализации элементов HTML-формы:

Примеры CSS

input[type=text], select { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } input[type=submit] { width: 100%; background-color: #4C7EAF; color: white; padding: 14px 20px; margin: 8px 0; border: none; border-radius: 4px; cursor: pointer; } input[type=submit]:hover { background-color: #4777A6; } div { border-radius: 5px; background-color: #f2f2f2; padding: 20px; }

Попробуйте сами »

Стили поля ввода (input)

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

Примеры CSS

input { width: 100%; }

Попробуйте сами »

В приведённых выше примерах ширина всех элементов <input> установлена на 100%. Если вы хотите задать ширину только для определённого типа input, можно использовать следующие селекторы атрибутов:

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

Внутренние отступы поля ввода

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

Примеры CSS

input[type=text] { width: 100%; padding: 12px 20px; margin: 8px 0; box-sizing: border-box; }

Попробуйте сами »

Обратите внимание, что мы задаёмbox-sizingСвойство —border-boxЭто гарантирует, что браузер отображает поле ввода с заданными шириной и высотой, включая границу и внутренние отступы.
Чтобы узнать больше, вы можете прочитатьCSS3 Box Sizing 。

Граница поля ввода (input)

ИспользованиеborderСвойство может изменять размер или цвет границы поля ввода. Используйтеborder-radiusСвойство может добавить закруглённые углы к полю ввода:

Примеры CSS

input[type=text] { border: 2px solid red; border-radius: 4px; }

Попробуйте сами »

Если вы хотите добавить только нижнюю границу, вы можете использоватьborder-bottomСвойство:

Примеры CSS

input[type=text] { border: none; border-bottom: 2px solid red; }

Попробуйте сами »

Цвет поля ввода (input)

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

Примеры CSS

input[type=text] { background-color: #3C7CBC; color: white; }

Попробуйте сами »

Фокус ввода (input)

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

Использование:focusСелектор может задать стиль поля ввода, когда оно получает фокус:

Примеры CSS

input[type=text]:focus { background-color: lightblue; }

Попробуйте сами »

Примеры CSS

input[type=text]:focus { border: 3px solid #555; }

Попробуйте сами »

Иконка ввода (input)

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

Примеры CSS

input[type=text] { background-color: white; background-image: url('searchicon.png'); background-position: 10px 10px; background-repeat: no-repeat; padding-left: 40px; }

Попробуйте сами »

Анимированное поле поиска

В следующем примере используется CSStransitionсвойство, которое заставляет поле ввода расширяться вправо при получении фокуса. Вы можете использоватьCSS Animationsраздел, чтобы увидеть больше.

Примеры 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)

Примечание:Использованиеresizeсвойство, отключающее возможность изменения размера текстового поля (обычно перетаскиванием правого нижнего угла для изменения размера).

Примеры CSS

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)

Примеры CSS

select { width: 100%; padding: 16px 20px; border: none; border-radius: 4px; background-color: #f1f1f1; }

Попробуйте сами »

Стили кнопок

Примеры CSS

input[type=button], input[type=submit], input[type=reset] { background-color: #4C7EAF; border: none; color: white; padding: 16px 32px; text-decoration: none; margin: 4px 2px; cursor: pointer; } /*Совет: Используйте width: 100%, чтобы задать кнопку на всю ширину*/

Попробуйте сами »

Для получения дополнительной информации, пожалуйста, обратитесь к нашемуCSS Buttonsруководству.

Адаптивные формы

Адаптивные формы могут перестраивать элементы в зависимости от размера окна браузера. Мы можем изменить размер окна браузера, чтобы увидеть эффект:

Дополнительно:В следующем примере используютсяCSS3 Media Queriesдля создания адаптивной формы.

Примеры CSS

* { box-sizing: border-box; } input[type=text], select, textarea { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 4px; resize: vertical; } label { padding: 12px 12px 12px 0; display: inline-block; } input[type=submit] { background-color: #4C7EAF; color: white; padding: 12px 20px; border: none; border-radius: 4px; cursor: pointer; float: right; } input[type=submit]:hover { background-color: #4777A6; } .container { border-radius: 5px; background-color: #f2f2f2; padding: 20px; } .col-25 { float: left; width: 25%; margin-top: 6px; } .col-75 { float: left; width: 75%; margin-top: 6px; } /*Очистка обтекания*/ .row:after { content: ""; display: table; clear: both; } /*Адаптивный макет — когда ширина экрана меньше 600px, расположите элементы вертикально*/ @media screen and (max-width: 600px) { .col-25, .col-75, input[type=submit] { width: 100%; margin-top: 0; } }

Попробуйте сами »
Другие расширения