Красивый css input: Делаем красивую форму на HTML и CSS.

Содержание

Стилизация input с примерами — Сверхновая DIGITAL-маркетинг

Одним из главных элементов на странице являются формы и их оформление довольно тонкий момент при создании сайта. Одни из основных тегов формы — input, label, button, textarea и select.

input нужен для текстовых полей, радио кнопок, флажков, а так же для кнопок — reset, file, password и других
textarea — текстовая область, в которую можно ввести текст в несколько строк
select — это список с возможностью выбора одного значения, либо нескольких. Он может быть как выпадающим, так и статичным
label — устанавливает связь между элементами формы
button — отправка данных формы. От input type=submit отличается тем, что имеет более расширенные возможности при создании кнопки

В данной статье мы рассмотрим: как стилизовать форму и все ее элементы при помощи CSS и jQuery. Приступим.

Создадим с вами обыкновенную форму:

input

Вот так он выглядит в HTML

Что бы оформить обычный input jQuery не нужен. Важно запомнить, бразуеры плохо обрабатывают высоту у input, поэтому при ее стилизации стоит отталкиваться от размера вашего шрифта, который используется на странице и для красоты добавим padding(отступ)

Стилизация textarea

В HTML он выглядит так:

стандартно textarea имеет следующие параметры:

правый нижний угол области текста, можно растянуть мышкой по экрану
для IE имеется постоянный scroll (прокрутка)

устраним эти пустяки, для этого пропишем следующее:

Готово. Наше поле с текстом стало более красивым. Но мы с вами идем дальше и переходим к radio.

Стилизация input radio

в HTML он выглядит так:

Бытует мнение что input не поддается стилизации в CSS, развеем этот миф.

Создадим label для того что бы при нажатии на название и «псевдокнопку» сработал radio input.
Внутри label создаем input и задаем ему type=radio.
После input добавляем пустой div и текст для input.

В CSS будем использовать checked, before, а так же + для обращения к соседним селекторам.

В итоге мы получаем вот такой результат

Стилизация input checkbox

в HTML он выглядит так:

Для стилизации checkbox будем использовать такие же манипуляции, как и с radio

Отличается CSS checkbox от radio только отсутствием border-radius

В итоге мы получаем вот такой результат

Стилизация select

Обычно, select описывается в HTML документе так:

А мы сделаем ход конем и стилизовать бедуем небольшим скриптом, а поможет нам в этом обыкновенный список. Он выпадает при нажатии кнопку, а при нажатии на пункт из списка его значение копируется в первоначальную кнопку по которой нажимали и в input hidden.

Приступим. Разметка HTML:

Стилизуем всё это добро

собственно сам код скрипта для нашего селекта

Выглядеть будет это так:

Стилизация Input file

type=file отображает на странице кнопку, с помощью которой можно выбрать файл. И блок в котором мы видим сам выбранный файл. Давайте рассмотрим стилизацию input file.

Создаем разметку следующего характера

Здесь я воспользовался небольшим хаком) обычный input делаем невидимым с помощью opacity. И задаем шрифт большого размера, наша кнопка станет большой и закроет весь container.

Под input который выводит загрузочный popup, расположим input. Он будет выводить название файла, который загружаем на сервер и кнопку выбора файла.

Добавим немного script’a. Он будет показывать название нашего файла, который прикрепили, добавим hover для кнопки когда input получает фокус:

В итоге мы получаем:

Стилизация input reset

Иногда требуется сброс для формы.
Создаем разметку.

Накинем стилей

Для чего jQuery?

Например, мы отправили форму и автоматически заполнили ее опять через PHP. Нажимая на стандартную кнопку reset у нас, она не сработает. А если использовать скрипт, то форма успешно очистится

Стилизация input submit

Стилизация button

Благодаря атрибуту type=submit, он сообщает о том что при нажатии на button данные формы передадутся на сервер.

В HTML он добавляется так

Поднакинем стиля

В итоге мы получаем:

Красивая стилизация input type с помощью CSS3

Данный урок достаточно прост, но он является той маленькой частью сайта который не стоит упускать. Все мы знаем, что формы ввода на сайта достаточно примитивны и однообразны. Сегодня мы подойдем к данному вопросу с достаточно элегантной точки зрения современного веб-дизайна. Мы рассмотрим процесс адаптивной стилизации input type с помощью CSS3. Изменив стили на ниже указанные вы получите стилизацию всех форм которые есть у Вас на сайте на желаемый. И так, давайте посмотрим, что у нас получилось.

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

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

Шаг 1. CSS

input {

padding: 10px;

font-size: 30px;

border: 10px solid rgba(255, 255, 255, .5);

@include box-shadow(

0 2px 10px rgba(0, 0, 0, .25) inset,

0 2px 10px rgba(0, 0, 0, .25));

@include border-radius(10px);

background: rgba(255, 255, 255, .5);

@include appearance(none);

outline: none;

color: #333;

width: 50%;

position: absolute;

left: 25%;

}

Вот и все. Готово!

Поля ввода input в стиле Google Material Design на CSS3

Создание полей input в стиле Google Material Design на чистом CSS3

1. HTML-разметка

HTML будет довольно простым. Нам потребуется стандартная форма с двумя input-полями. Вот она:

<form>
   <div>      
      <input type="text" required>
      <span></span>
      <label>Имя</label>
   </div>
   <div>      
      <input type="text" required>
      <span></span>
      <label>Email</label>
   </div>
</form>

Тут у нас три компонента, которые нам нужны.

input Будет служить в качестве входных данных.
bar Проведет два бара, которые составляют подчеркивание.
label Будет выступать в качестве placeholder, пока мы не нажмете на input. После чего он сместится вверх.

С HTML разобрались, переходим к CSS.

2. Анимирование input’ов

Все CSS-стили разделим на три составные части, это: starting stylings(дефолтные стили нашей формы) label/placeholder и underline.
Начнем, конечно с дефолтных стилей:

/* form starting stylings ------------------------------- */
.group {
  position: relative;
  margin-bottom: 30px;
}

input {
  font-size: 16px;
  padding: 10px;
  display: block;
  width: 300px;
  border: none;
  border-bottom: 1px solid #ccc;
}
input:focus {
  outline: none;
}

Здесь мы просто разместили наши поля ввода формы. Также устанавливаем group позиционирование position:relative; для того, чтобы в дальнейшем иметь возможность размещать прочие элементы относительно этого.

Теперь переходим к стилизации прочих элементов нашей формы:

/* LABEL ======================================= */
label {
  color: #999;
  font-size: 18px;
  position: absolute;
  pointer-events: none;
  left: 10px;
  top: 15px;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
}

/* active state */
input:focus ~ label, input:valid ~ label {
  top: -15px;
  font-size: 14px;
  color: #5264AE;
}


/* BOTTOM BARS ================================= */
.bar {
  position: relative;
  display: block;
  width: 320px;
}
.bar:before, .bar:after {
  content: "";
  height: 2px;
  width: 0;
  bottom: 0;
  position: absolute;
  background: #5264AE;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
}
.bar:before {
  left: 50%;
}
.bar:after {
  right: 50%;
}

/* active state */
input:focus ~ .bar:before,
input:focus ~ .bar:after {
  width: 50%;
}

На этом все. Работа завершена, и теперь у нас есть поле ввода, похожее на поля ввода Google Material Design.

3. Результат работы

See the Pen Google Material Design (input) by Migo Userlife (@migo_userlife) on CodePen.

Стилизация формы с помощью CSS

Здравствуй, уважаемый читатель.

Это пятнадцатый урок изучения CSS. В этом уроке вы узнаете как работать с элементами формы, а именно как задать фон для текстового поля и текстовой области, а также как применять другие свойства для разных элементов.

Перед изучением данного урока пройдите предыдущие уроки:

Урок 1. Что такое CSS?
Урок 2. Базовые селекторы
Урок 3. Групповые селекторы и селекторы потомков
Урок 4. Псевдоселекторы ссылок
Урок 5. Шрифты
Урок 6. Оформление текста
Урок 7. Рамки
Урок 8. Оформление списков
Урок 9. Наследование
Урок 10. Блочная модель
Урок 11. Высота и ширина блока
Урок 12. Конфликты полей
Урок 13. Работа с изображениями. Часть 1
Урок 13. Работа с изображениями. Часть 2
Урок 14. Таблицы

Теория и практика

Изучая html мы создавали формы с помощью тегов <form>, а внутри создавали необходимое количество <input> и <textarea>.

Оформление поля input

Для того чтобы задать свойство для элемента формы нам необходим селектор. Этим селектором могут выступать такие теги как input(в этом случае как вы уже знаете мы зададим стиль для всех input-ов), textarea или селектор class. Рассмотрим на примере «для всех полей input зададим фон голубой, цвет букв синий и рамку синего цвета». Для работы возьмем следующую форму:

<html>
<head>
    <title>Главная</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <form>
        <p>Введите Ваше имя:</p>
        <input type="text" name="name" value="Ваше имя..." size="20" maxlength="15">
        <p>Введите Вашу фамилию:</p>
        <input type="text" name="surname" value="Ваша фамилия..." size="20" maxlength="15">
        <p>Расскажите немного о себе:</p>
        <textarea name="aboutyou" cols="40" rows="6"></textarea>
    </form>
</body>
</html>

И для того чтобы преобразить данную форму используем следующий CSS код:

input{
    background-color:#D3D5FF; /* голубой фон */
    color:#0007D3; /* синий цвет букв */
    border:2px solid #7A7DD6; /* синяя рамка в два пикселя */
    padding:5px; /* внутренний отступ для текста в 5 пикселей */
}

Как это выглядит в браузере:

Я думаю объяснять всё подробно нет необходимости. Но заострю лишь внимание на моменте, где мы указываем селектор. Мы написали селектор «input» — а это значит что данный стиль применится для всех полей на странице. Если вы хотите задать какому-то определенному полю стиль, необходимо прописать ему в html атрибут и вписать свойство в CSS.

Оформление поля textarea

Также мы можем оформить по своему желанию текстовую область — textarea. Как вы уже догадались это можно сделать также двумя способами. При оформлении текстовой области в этом уроке мы воспользуемся вторым способом через атрибут. Мы имеем html страницу, которая была в начале урока. Присвоим для текстовой области атрибут:

1	<textarea name="aboutyou" cols="40" rows="6"></textarea>

Затем на фон установим изображение и выделим текстовую область синей рамкой:

input{
    background-color:#D3D5FF; /* голубой фон */
    color:#0007D3; /* синий цвет букв */
    border:2px solid #7A7DD6; /* синяя рамка в два пикселя */
    padding:5px; /* внутренний отступ для текста в 5 пикселей */
}
 
.niceText{
    background-image:url('about.png'); /* изображение для заднего фона */
    background-repeat:no-repeat; /* запрещаем повтор фонового изображения */
    background-position:100% 100%; /* смещаем его в правый нижний угол */
    border:2px solid #7A7DD6; /* синяя рамка в два пикселя */
}

Как это выглядит в браузере:

Посмотреть примерСкачать

Картинка вместо кнопки input

И последнее что мы рассмотрим в этом уроке это изображение вместо простой кнопки. Возьмем следующий код html:

<html>
<head>
    <title>Главная</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <form>
        <p>Введите Ваше имя:</p>
        <input type="text" name="name" value="Ваше имя..." size="20" maxlength="15">
        <p>Введите Вашу фамилию:</p>
        <input type="text" name="surname" value="Ваша фамилия..." size="20" maxlength="15">
        <p>Расскажите немного о себе:</p>
        <textarea name="aboutyou" cols="40" rows="6"></textarea>
        <div><input type="image" name="submit" src="send.png"></div>
    </form>
</body>
</html>

И применим следующие свойства CSS:

.textInput{
    background-color:#D3D5FF; /* голубой фон */
    color:#0007D3; /* синий цвет букв */
    border:2px solid #7A7DD6; /* синяя рамка в два пикселя */
    padding:5px; /* внутренний отступ для текста в 5 пикселей */
}
 
.niceText{
    background-image:url('about.png'); /* изображение для заднего фона */
    background-repeat:no-repeat; /* запрещаем повтор фонового изображения */
    background-position:100% 100%; /* смещаем его в правый нижний угол */
    border:2px solid #7A7DD6; /* синяя рамка в два пикселя */
}
 
.sendA{
    margin:20px 0 0 20px; /* отступ снизу и слева для кнопки */
}

Всё что мы изменили это каждому input-у добавили атрибут. А в конце вместо обычной кнопки мы вставили input с атрибутами type=»image» name=»submit» src=»send.png».

type=»image» — определяет что у нас будет изображение вместо кнопки;

name=»submit» — имя кнопки;

src=»send.png» — путь где расположено изображение для кнопки.

Как это выглядит в браузере:

Посмотреть примерСкачать

На этом я заканчиваю наш урок. Я уверен что это для вас несложно и вы быстро поняли что к чему. Поэтому поэкспериментируйте и двигайтесь к следующему уроку!

Больше практикуйтесь!

Делаем красивые кнопки выбора (стилизация radio input)

Сегодня я покажу пример как всего в несколько строчек кода сделать приятные и удобные кнопки выбора для вашего сайта. Они отлично впишутся как в десктопную версию вашего сайта так и в мобильную.

Не могу не отметить, что делать стандартные Radio-кнопки или, тем более, выпадающие списки для выбора из 2-4 вариантов не очень удобно и красиво. Поэтому я решил показать вам как можно сделать подобные кнопки выбора значительно удобнее.

Разметка

Нам понадобится всего несколько дополнительных элементов: при написании разметки формы, вам потребуется обернуть каждую пару input + label в блочный элемент, в моём случае это div с классом form-item и так же поступить с этими div’ами, у меня это контейнер с классом radio-container. Вы наверняка уже сталкивались ранее с подобным подходом, если использовали Boostrap Framework.

Я набросал макет для 2, 3 и 4 кнопок выбора (не рекомендую использовать данный подход для большего количества элементов, в таком случае лучше воспользоваться выпадающим списком):

<form>
<div>
<div>
<input type=»radio» name=»option1″ checked>
<label for=»radio1″>radio1</label>
</div>
<div>
<input type=»radio» name=»option1″>
<label for=»radio2″>radio2</label>
</div>
</div>
</form>

<br>

<form>
<div>
<div>
<input type=»radio» name=»option2″ checked>
<label for=»radio3″>radio3</label>
</div>
<div>
<input type=»radio» name=»option2″>
<label for=»radio4″>radio4</label>
</div>
<div>
<input type=»radio» name=»option2″>
<label for=»radio5″>radio5</label>
</div>
</div>
</form>

<br>

<form>
<div>
<div>
<input type=»radio» name=»option3″ checked>
<label for=»radio6″>radio6</label>
</div>
<div>
<input type=»radio» name=»option3″>
<label for=»radio7″>radio7</label>
</div>
<div>
<input type=»radio» name=»option3″>
<label for=»radio8″>radio8</label>
</div>
<div>
<input type=»radio» name=»option3″>
<label for=»radio9″>radio9</label>
</div>
</div>
</form>

<form>

<div>

<label for=»radio1″>radio1</label>

</div>

<div>

<label for=»radio2″>radio2</label>

</div>

</form>

<br>

<form>

<div>

<label for=»radio3″>radio3</label>

</div>

<div>

<label for=»radio4″>radio4</label>

</div>

<div>

<label for=»radio5″>radio5</label>

</div>

</form>

<br>

<form>

<div>

<label for=»radio6″>radio6</label>

</div>

<div>

<label for=»radio7″>radio7</label>

</div>

<div>

<label for=»radio8″>radio8</label>

</div>

<div>

<label for=»radio9″>radio9</label>

</div>

</form>

Стили

Для начала нам необходимо будет скрыть сами элементы выбора, я сделал это просто, при помощи свойства display: none. Теперь пользователю отображаются только элементы label, если вы не допустили ошибок в разметке, то по нажатию на них, элементы выбора должны активироваться, вы можете проверить это при помощи инструментов разработчика в вашем браузере.

Далее выравниваем label по горизонтали, вы можете сделать это несколькими способами:

При помощи свойства float: left;, применённого к элементам label. Я не рекомендую данный подход, так как он в некоторых ситуациях, может сломать вёрстку, и, кроме того, вам придётся использовать хак в виде дополнительного элемента clearfix.
Использовать свойство display: inline-block;, для элементов label. Данный подход я использовал ранее, до того как практически во всех браузерах появилась поддержка flexbox.
Для родительского контейнера (в моём случае это radio-container) воспользоваться свойством display: flex;

Я использую третий вариант, flexbox поддерживаться практически во всех браузерах, если вы хотите поддерживать IE, этот подход вам не подойдёт.

Далее нам осталось лишь показать пользователю какой элемент активен на данный момент, сделать это очень просто, но есть один нюанс: ваш элемент input должен следовать перед элементом label, иначе css свойство, приведённое ниже, работать не будет.

Для того чтобы выделить активный элемент используем следующий приём:

.radio-container .radio-btn input:checked + label{
background-color: #0082fe;
color: #fff;
}

.radio-container .radio-btn input:checked + label{

background-color: #0082fe;

color: #fff;

}

Эта запись означает, что вложенные стили будут применяться только к элементу label и только в том случае, если элемент radio, к которому относится label, активен в данный момент.

Как видно из записи, активный элемент будет другого цвета и текст будет белым, в моём примере этого достаточно.

Результат

Я добавил ещё немного стилей для более красивого отображения элементов выбора, вот какой результат у меня получился:

Можно немного изменить стили и получить такой результат:

Как видите, вы можете легко изменить внешний вид получившихся кнопок как вам угодно.

Данный приём очень хорошо работает когда у вас есть всего 2-4 варианта выбора, на пример гендерная принадлежность пользователя, выбор из вариантов «Да», «Нет», период оповещения (ежедневно, еженедельно, ежемесячно) и так далее. При больше количестве элементов советую воспользоваться выпадающим списком, это будет и удобнее для пользователя и красивее выглядеть на вашем сайте.

comments powered by HyperComments

Список псевдоэлементов для стилизации элементов управления формы — CSS-LIVE

Стилизация элементов формы является больной темой при разработке веб-приложений. Исторически, веб-разработчикам приходилось принимать те элементы управления форм, которые предоставлял браузер, не надеясь на кастомизацию.Тем не менее, браузерные движки добавляют всё больше и больше разных зацепок через псевдоэлементы, дающие автору некоторый контроль над отображением.

Несмотря на то, что все эти псевдоэлементы специфичны для каждого браузерного движка (и поэтому требуют браузерных префиксов), они всё равно могут быть полезными для кастомизации отображения в каждом из них. Эта статья – моя лучшая попытка составить полный список псевдоэлементов, доступных в движках Trident, Gecko, и WebKit. На момент написания этой статьи движок Blink с недавних пор является ответвлением WebKit, так что псевдоэлементы в них идентичны. Я не в курсе на счёт псевдоэлементов, которые поддерживает Presto.

Пара замечаний:

Все описанные здесь псевдоэлементы для движка Trident были добавлены в IE10 и не работают в более ранних версиях Internet Explorer.
Чтобы стилизовать некоторые псевдоэлементы движка WebKit, должны установить самим элементам псевдокласс -webkit-appearance со значением «none«. например, чтобы застилизовать ::-webkit-progress-bar, вы должны применить -webkit-appearance: none; к соответствующему элементу <progress>

Содержание

Элементы <input>
Другие элементы
Разное

input[type=button]

Gecko

Смотрите <button>

input[type=checkbox] / input[type=radio]

Trident

Trident предоставляет псевдоэлемент ::-ms-check для чекбоксов и радиокнопок. Например:

<input type="checkbox">
<input type="radio">

::-ms-check {
    color: red;
    background: black;
    padding: 1em;
}

Вот как это будет выглядеть в браузере IE10 в Windows 8:

input[type=color]

WebKit

Webkit предоставляет два псевдоэлемента для своей палитры цвета, ::-webkit-color-swatch-wrapper и ::-webkit-color-swatch. Вы можете добавить разные правила для этих элементов, но мне ещё не удалось выдумать что-нибудь полезное. В примере ниже показывается просто, что это возможно.

<input type="color">

::-webkit-color-swatch-wrapper { border: 2px solid red; }
::-webkit-color-swatch { opacity: 0.5; }

Вот как это выглядит в Chrome 26 на Mac OS X.

input[type=date]

WebKit

Следующие восемь псевдоэлементов доступны в WebKit для кастомизации текстовых полей в input’ах предназначенных для установки даты.

::-webkit-datetime-edit
::-webkit-datetime-edit-fields-wrapper
::-webkit-datetime-edit-text
::-webkit-datetime-edit-month-field
::-webkit-datetime-edit-day-field
::-webkit-datetime-edit-year-field
::-webkit-inner-spin-button
::-webkit-calendar-picker-indicator

Здесь изображена внутренняя структура этих элементов:

Так что, если вы считаете, что хорошо бы задать полю даты воздуха побольше и весёленькие цвета, то вы можете добавить следующие объявления:

<input type="date">

::-webkit-datetime-edit { padding: 1em; }
::-webkit-datetime-edit-fields-wrapper { background: silver; }
::-webkit-datetime-edit-text { color: red; padding: 0 0.3em; }
::-webkit-datetime-edit-month-field { color: blue; }
::-webkit-datetime-edit-day-field { color: green; }
::-webkit-datetime-edit-year-field { color: purple; }
::-webkit-inner-spin-button { display: none; }
::-webkit-calendar-picker-indicator { background: orange; }

Вот как это будет выглядеть в браузере Chrome 26 и на OС X:

input[type=file]

Все браузерные движки автоматически генерируют кнопку, когда мы создаём <input type=»file»>. Исторически, эта кнопка была совершенно нестилизуемой. Однако, недавно Trident and WebKit добавили некоторые зацепки через псевдоэлементы.

Trident

Что касается IE10 кнопка input-file может быть застилизована при помощи псевдоэлемента ::-ms-browse. В основном все CSS-правила, которые вы добавляете к обычной кнопке, могут быть добавлены в псевдоэлементе.

<input type="file">

::-ms-browse {
    background: black;
    color: red;
    padding: 1em;
}

Вот как это выглядит в браузере IE10 в Windows 8:

WebKit

WebKit обеспечивает зацепку для его кнопки input-file c помощью псевдоэлемента ::-webkit-file-upload-button. Снова почти любое правило может быть применено, поэтому пример для Trident здесь тоже будет работать.

Вот как это будет выглядеть в браузере Chrome 26 и на OС X:

input[type=number]

WebKit

По умолчанию WebKit предоставляет для числовых полей кнопки «увеличить» и «уменьшить». Псевдоэлементы ::-webkit-textfield-decoration-container, ::-webkit-inner-spin-button and ::-webkit-outer-spin-button нужны для кастомизации. Хотя вы не можете делать массу вещей с этими элементами, тем не менее, может быть полезно скрыть эти кнопки.

<input type="number">

::-webkit-textfield-decoration-container { }
::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

Вот как это будет выглядеть в браузере Chrome 26 и на OС X:

input[type=password]

Trident

Trident предоставляет элемент управления, который можно нажать, чтобы отобразить пароль в виде простого текста. Эта возможность настраивается с помощью псевдоэлемента ::-ms-reveal. Вы можете добавить для управления отобразить пароль и такие свойства, как: color, background, или display, чтобы скрыть кнопку «отобразить пароль».

<input type="password">

::-ms-reveal { display: none; }

Вот как это выглядит в браузере IE10 в Windows 8:

placeholder Attribute

Gecko

Gecko предоставляет псевдоэлемент ::-moz-placeholder, чтобы стилизовать текст в плейсхолдере. Вы можете использовать этот псевдоэлемент, чтобы изменять цвет и свойства шрифта в плейсхолдере. Например:

<input placeholder="placeholder">

::-moz-placeholder {
    color: blue;
    font-family: 'Comic Sans MS';
}

Вот как это выглядит в браузере Firefox 20 на OС X:

Примечание: Gecko сменил псевдокласс :-moz-placeholder на псевдоэлемент ::-moz-placeholder в Firefox 19.

Trident

Trident предлагает стилизовать текст плейсхолдера через псевдокласс, а не через псевдоэлемент. Однако, псевдокласс :-ms-input-placeholder имеет такие же возможности, как и псевдоэлементы из других браузерных движков:

<input placeholder="placeholder">

:-ms-input-placeholder {
    color: blue;
    font-family: 'Comic Sans MS';
}

Вот как это выглядит в браузере IE10 в Windows 8:

WebKit

WebKit предоставляет псевдоэлемент ::-webkit-input-placeholder. Так же он может быть использован, чтобы изменять цвет и шрифт текста плейсхолдера:

<input placeholder="placeholder">

::-webkit-input-placeholder {
    color: blue;
    font-family: 'Comic Sans MS';
}

Вот как это будет выглядеть в браузере Chrome 26 и на OС X:

input[type=range]

Gecko

Начиная с Firefox 22, Gecko предлагает псевдоэлементы ::-moz-range-track и ::-moz-range-thumb для стилизации input’ов-ползунков. К этим элементам можно применить большинство CSS-правил. Например:

<input type="range">

::-moz-range-track {
    border: 2px solid red;
    height: 20px;
    background: orange;
}
::-moz-range-thumb {
    background: blue;
    height: 30px;
}

Вот как это выглядит в браузере Firefox 22 и на OС X:

Trident

Trident предоставляет впечатляющее количество псевдоэлементов для кастомизации его ползунка выбора значения из диапазона.

::-ms-fill-lower: часть полоски, по которой ездит ползунок, под/перед самим ползунком.
::-ms-fill-upper: Часть полоски, по которой ездит ползунок, над/после самого ползунка.
::-ms-ticks-before: Область над/перед полоской ползунка с делениями.
::-ms-ticks-after: Область под/после полоски ползунка с делениями.
::-ms-thumb: Сам ползунок
::-ms-track: Полоска ползунка
::ms-tooltip: Всплывающая подсказка, которая появляется во время того, как пользователь выбирает значение в селекторе ползунка. Заметьте, что этот элемент не может быть стилизован, а только скрыт при помощи display: none. 🙂

Легче изобразить это на примере. Держите:

<input type="range">

::-ms-fill-lower { background: orange; }
::-ms-fill-upper { background: green; }
::-ms-thumb { background: red; }
::-ms-ticks-after { display: block; color: blue; }
::-ms-ticks-before { display: block; color: black; }
::-ms-track { padding: 20px 0; }
::-ms-tooltip { display: none; /* только показать и скрыть */ }

Именно так это будет выглядеть в браузере IE10 в Windows 8:

WebKit

WebKit предоставляет псевдоэлемент the ::-webkit-slider-runnable-track для полоски и ::-webkit-slider-thumb для самого ползунка. Хотя с ним и мало что можно сделать, но вы можете добавить цвета и отступы:

<input type="range">

::-webkit-slider-runnable-track {
    border: 2px solid red;
    background: green;
    padding: 2em 0;
}
::-webkit-slider-thumb {
    outline: 2px solid blue;
}

Вот так это выглядит в Chrome 26 на ОС Х:

И последнее замечание об input’ах-ползунках. Trident и Webkit позволяют менять вид самого ползунка при наведении с помощью псевдоэлементов (::-webkit-slider-thumb:hover и ::-ms-thumb:hover соответственно). Gecko в настоящий момент не может похвастаться такой возможностью.

input[type=reset]

Gecko

Смотрите <button>

input[type=search]

WebKit

По умолчанию WebKit предоставляет специальный пользовательский интерфейс для полей поиска с кнопками отмены и поиска. Для кастомизации этих полей требуется два псевдоэлемента: :-webkit-search-cancel-button and ::-webkit-search-results-button. К сожалению, мы не можем делать с этими элементами ничего особенного кроме как скрыть их, как показано ниже:

<input type="search">

/* Удалить круглые углы */
input[type=search] { -webkit-appearance: none; }

/* Скрыть кнопку отмены */
::-webkit-search-cancel-button { -webkit-appearance: none; }

/* Скрыть лупу */
::-webkit-search-results-button { -webkit-appearance: none; }

Вот так это выглядит в Chrome 26 на ОС Х:

input[type=submit]

Gecko

Смотрите <button>

input[type=text]

Trident

Что касается IE10 – Trident предоставляет псевдоэлемент ::-ms-value для стилизации вводимых символов в текстовых полях (input[type=text], input[type=password], и т.д.) а так же <select>’ов. Например:

<input type="text" value="value">
<input type="password" value="value">
<select><option selected>option</option></select>

::-ms-value {
    color: red;
    background: black;
    padding: 1em;
}

Вот так это выглядит в IE10 в Windows 8:

Управление удалением введенных символов

В IE10, когда текстовое поле получает фокус и при этом оно не пустое, то в этом случае в правом углу поля появляется маленький крестик управления. При нажатии на этот крестик содержимое текстового поля очищается. Сам крестик (Х) стилизуется с помощью псевдоэлемента ::-ms-clear. Поэтому можно скрыть его:

<input type="text">

::-ms-clear { display: none; }

Вот так это выглядит в IE10 в Windows 8:

Псевдоэлемент ::-ms-clear может принимать различные правила, поэтому можно делать даже так:

<input type="text" value="Lorem Ipsum">

::-ms-clear {
    color: red;
    background: black;
    padding: 1em;
}

Вот что выйдет в итоге:

Элемент <button>

Gecko

Gecko применяет псевдоэлементы ::-moz-focus-outer и ::-moz-focus-inner для input-ов, значение атрибута type которых является button, reset, и submit, а так же к элементам <button>.

С этими псевдоэлементами мало что можно делать, но одну важную вещь о них знать надо. Gecko применяет padding и border к ::-moz-focus-inner по умолчанию:

button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
    border: 1px dotted transparent;
    padding: 0 2px;
}

Эти правила могут создать небольшие внешние различия между отображением кнопки в Gecko и других движках. Это запутывает, и в Багзилле уже заведен баг с предложением это убрать. Баг открыт с 2002-го года, так что не надейтесь понапрасну.

По умолчанию padding и border можно сбросить, просто установив их в 0:

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

Результат до установки этих правил и после, можно увидеть на скриншоте (ниже) в Firefox 19 на OС X:

<keygen> Element

WebKit

WebKit предоставляет псевдоэлемент ::-webkit-keygen-select, который может быть использован для кастомизации выпадающего списка, который использует элемент <keygen>. Например:

<keygen>

::-webkit-keygen-select {
    background: black;
    color: red;
}

Вот так это выглядит в Chrome 26 в ОС Х:

<meter> Element

WebKit предоставляет псевлоэлементы ::-webkit-meter-bar, ::-webkit-meter-even-less-good-value, ::-webkit-meter-optimum-value, и ::-webkit-meter-suboptimal-value для кастомизации отображения элемента <meter>.

Для того чтобы псевдоэлементы могли применять стили, вы должны установить свойство -webkit-appearance в значение none на самом элементе <meter>.

Только один из псевдоэлементов ::-webkit-meter-even-less-good-value, ::-webkit-meter-optimum-value, and ::-webkit-meter-suboptimal-value Только один из псевдоэлементов, в зависимости от значения атрибута «value» элемента <meter>.

Взгляните на следующий пример:

<meter low="69" high="80" max="100" optimum="100" value="92">A</meter>
<meter low="69" high="80" max="100" optimum="100" value="72">C</meter>
<meter low="69" high="80" max="100" optimum="100" value="52">E</meter>

meter { -webkit-appearance: none; }
::-webkit-meter-bar {
    height: 50px;
    background: white;
    border: 2px solid black;
}
::-webkit-meter-optimum-value { background: green; }
::-webkit-meter-suboptimum-value { background: orange; }
::-webkit-meter-even-less-good-value { background: blue; }

Вот так это выглядит в Chrome 26 в ОС Х:

<progress> Element

WebKit

WebKit предоставляет псевдоэлементы ::-webkit-progress-inner-element, ::-webkit-progress-bar и ::-webkit-progress-value, чтобы стилизовать элементы progress, в соответствии со следующей структурой:

Как и в случае meter, для стилизации этих элементов вам нужно задать -webkit-appearance: none; для элемента progress. Вот пример:

<progress max="100" value="50"></progress>

progress { -webkit-appearance: none; }
::-webkit-progress-inner-element { }
::-webkit-progress-bar { border: 2px solid black; }
::-webkit-progress-value { background: red; }

Так это выглядит в Chrome 26 на OS X:

Gecko

Gecko предоставляет псевдоэлемент ::-moz-progress-bar для стилизации самого прогрессбара. Например:

<progress max="100" value="50"></progress>

::-moz-progress-bar { background: red; }

Так это отобразится в Firefox 19 на OS X:

Trident

Как и Gecko, Trident предоставляет единственный псевдоэлемент для стилизации прогрессбара, ::-ms-fill. Например:

<progress max="100" value="50"></progress>

::-ms-fill { background: red; }

Вот как это выглядит в IE10 на Windows 8:

<select> Element

Trident

Начиная с IE10, Trident дает инструмент стилизации стрелки у выпадающих списков, ::-ms-expand. Например:

<select>
    <option selected>One</option>
</select>

::-ms-expand {
    padding: 2em;
    color: red;
    background: black;
}

Вот как это выглядит в IE10 на Windows 8:

<textarea> Element

WebKit

WebKit предоставляет псевдоэлемент ::-webkit-resizer для стрелки изменения размера, которую он автоматически добавляет в правый нижний угол элементов textarea.

Ее можно скрыть с помощью display: none или -webkit-appearance: none:

<textarea></textarea>

::-webkit-resizer {
    display: none;
}

Вот так это выглядит в Chrome 26 в ОС Х:

Замечание: добавление display: none к ::-webkit-resizer не препятствует пользователю изменять размер textarea, а только скрывает стрелку. Если вы хотите запретить изменение размера, задайте CSS-свойству resize значение none. Это тоже убирает стрелку и обладает тем преимуществом, что работает во всех браузерах, поддерживающих растягивание textarea.

Псевдоэлемент ::-webkit-resizer также поддается некоторой основной стилизации. Если вам хочется, чтобы стрелка была более цветной, вы можете добавить это:

<textarea></textarea>

::-webkit-resizer {
    border: 2px solid black;
    background: red;
    box-shadow: 0 0 5px 5px blue;
    outline: 2px solid yellow;
}

Вот как это выглядит Chrome 26 на OС X:

Всплывающие сообщения валидации формы

WebKit

Обновлено: Chrome 28 больше не поддерживает эти псевдоэлементы.

WebKit — единственный движок, поддерживающий стилизацию сообщений валидации, создаваемых API валидации форм. Он предоставляет следующие псевдоэлементы:

::-webkit-validation-bubble
::-webkit-validation-bubble-arrow
::-webkit-validation-bubble-arrow-clipper
::-webkit-validation-bubble-heading
::-webkit-validation-bubble-message
::-webkit-validation-bubble-text-block

Проще наглядно увидеть, что делает каждый элемент. Вот пример:

::-webkit-validation-bubble { padding: 1em; background: orange; }
::-webkit-validation-bubble-arrow { background: blue; }
::-webkit-validation-bubble-arrow-clipper { border: 2px solid black; }
::-webkit-validation-bubble-heading { background: green; }
::-webkit-validation-bubble-message { color: white; background: purple; }
::-webkit-validation-bubble-text-block { border: 1px solid red; padding: 1em; }

Вот как это выглядит в Chrome 26 on OС X:

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

::-webkit-validation-bubble-message {
    color: #eee;
    background: black;
}
::-webkit-validation-bubble-arrow {
    background: black;
    border-color: #444;
    box-shadow: none;
}

Вот как это выглядит Chrome 26 on OС X:

Вот и всё!

Будем надеется, что вы нашли этот список полезным для себя. Если я вдруг забыл какие-либо элементы или какая-нибудь информация из статьи уже устарела, дайте мне, пожалуйста, знать это в комментариях.

Источники

Оригинал статьи и автор

P.S. Это тоже может быть интересно:

Нестандартный вид текстовых полей | htmlbook.ru

Изображения и фоновые рисунки позволяют легко изменить вид текстовых полей и кнопок для отправки формы на сервер. Как обычно, вначале требуется нарисовать желаемые элементы в графическом редакторе (рис. 1), а затем сделать отдельные изображения для каждого поля.

Рис. 1. Форма с нестандартными элементами

Начнём с однострочного текстового поля. Размеры картинки получились 328х46 пикселов, эти значения укажем в качестве ширины и высоты. Саму картинку ставим фоном с помощью свойства background. Изначально у текстового поля отображается рамка, чтобы она не портила вид её необходимо спрятать, задав свойство border со значением none (пример 1).

Пример 1. Текстовое поле

XHTML 1.0CSS 2.1IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Текстовое поле</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style type="text/css">
   .user {
    width: 308px; /* Ширина поля с учетом padding */
    height: 46px; /* Высота */
    background: #dad7c5 url(images/input.png) no-repeat; /* Фон */
    padding: 0 10px; /* Поля */
    border: none; /* Убираем рамку */
    font-size: 1em; /* Размер текста */
    line-height: 46px; /* Выравниваем по  центру в IE */
   }
  </style>
 </head>
 <body>
  <form action="">
   <p><input type="text" value="Имя" /></p>
  </form>
 </body>
</html>

Наше поле по высоте получается довольно большим по сравнению с полем по умолчанию, из-за этого возникают проблемы с выравниванием текста по центру в IE. Он будет выводиться по верхнему краю поля, что выглядит довольно небрежно. Для выравнивания используем свойство line-height со значением равным высоте поля заданным через height. На остальные браузеры это дополнение не окажет влияния, поэтому условными комментариями можно пренебречь.

Для многострочного текстового поля установка фона происходит аналогично. Но есть небольшое отличие — с правой стороны имеются кляксы, если мы вставим картинку фоном для <textarea>, то при появлении вертикальной полосы прокрутки она будет выводиться прямо по кляксам. При этом теряется эффект рамки. Поэтому фон добавим для блочного элемента, а <textarea> выведем уже в нём (пример 2).

Сюда же вставим и рисованную кнопку для отправки файла. Это делается через <input type=»image»>, в атрибуте src указываем путь к файлу, остальное браузер берет на себя.

Пример 2. Поле для ввода текста

XHTML 1.0CSS 2.1IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Текстовое поле</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style type="text/css">
   .comment {
    width: 347px; /* Ширина рисунка */
    height: 176px; /* Высота рисунка */
    background: #dad7c5 url(images/textarea.png) no-repeat; /* Фон */
   }
   .comment textarea {
    border: none; /* Убираем рамку */
    background: transparent; /* Прозрачный фон */
    margin: 3px; /* Отступы от линии */
    width: 318px; /* Ширина поля */
    padding: 5px 0 5px 5px; /* Поля в тексте */
    height: 160px; /* Высота */
   }
  </style>
 </head>
 <body>
  <form action="handler.php">
   <div><textarea cols="10" rows="10"></textarea></div>
   <p><input type="image" src="images/send.png" /></p>
  </form>
 </body>
</html>

По умолчанию текстовое поле имеет белый цвет фона, что нам совершенно не требуется, поэтому в свойствах задаём его прозрачным через значение transparent.

Браузеры несколько по-разному выводят полосу прокрутки, но эти изменения не настолько существенны, чтобы придавать им значение. К примеру, вид формы в Opera показан на рис. 2.

Рис. 2. Поле для ввода текста

В браузерах примеры отображаются корректно, только следует учесть два момента.

В Safari и Chrome к активным полям добавляется подсветка, которая сообщает о фокусе элемента. При использовании фоновых рисунков такая подсветка может «попортить» дизайн, поэтому от неё в некоторых случаях следует отказаться, добавив стилевое свойство outline со значением none к селекторам INPUT и TEXTAREA.
В браузере IE7 наблюдается ошибка с фоном. Если в текстовом поле вводить текст, превышающий ширину поля, то фон начнёт смещаться. Можно ограничить длину текста, используя атрибут maxlength тега <input> или установить фон не для <input>, а для обрамляющего тега <div>, как это показано в примере 2. В IE8 эта ошибка исправлена.

24 CSS Input Text

Коллекция бесплатных HTML и CSS текста типа ввода примеров кода: заполнителей, меток с плавающей запятой и т. Д. Обновление коллекции за июнь 2018 года. 10 новинок.

Ввод текста JavaScript
Входной текст jQuery
React Input Text
Текст ввода Vue

Автор

Лукас Оливейра
7 октября 2019 г.

О коде

Ввод текста

Введите текстовый материал с градиентом.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

адаптивный: да

Зависимости: —

Автор

Аарон Икер
15 августа 2019

О коде

Группа ввода

Группа ввода : фокус в пределах .

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

адаптивный: да

Зависимости: —

О коде

Поля ввода текста материала

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

адаптивный: да

Зависимости: —

Автор

Никлеш Тиване
14 января 2019 г.

О коде

Прыгающий ввод текста

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

адаптивный: да

Зависимости: —

О коде

Отображение метки формы после ввода текста

Ярлык формы отображается после ввода текста только CSS.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор

bertdida
15 октября 2018 г.

О коде

Оповестить меня

Для проверки формы с использованием HTML требуются атрибуты и шаблона вместе с CSS : требуется и : допустимые селекторы .

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор

Андреас Сторм
20 июля 2018 г.

О коде

Упругая проверка

Совместимые браузеры: Chrome, Opera, Safari

адаптивный: да

Зависимости: —

Автор

Андреас Сторм
15 июня 2018 г.

О коде

Автор

Ана Тудор
15 января 2017 г.

О коде

Поле ввода с подчеркиванием под каждым символом

Попробуйте удалить и написать что-нибудь еще в поле ввода.Он использует блок ch , ширина которого равна ширине символа 0 . Также предполагается, что шрифт в поле input является моноширинным, так что все символы имеют одинаковую ширину. Таким образом, ширина каждого символа всегда равна 1 канал . Промежуток между символами принят равным .5ch . Это значение, которое мы установили для межбуквенного интервала . Ширина ввода — это количество символов, умноженное на сумму между шириной буквы ( 1 канал, ) и шириной промежутка (.5 канал ). Итак, 7 * (1 канал + 0,5 канала) = 7 * 1,5 канала = 10,5 канала . Мы удаляем фактическую границу входного и устанавливаем фальшивую с помощью повторяющегося линейного градиента . Тире (тускло-серый) идет от 0 к 1 канал , а промежуток ( прозрачный ) начинается сразу после тире и переходит к 1,5 канал . Он прикреплен к левому и нижнему краю ввода — это компонент background-position ( 0% по горизонтали и 100% по вертикали).Он распространяется по всему вводу по горизонтали ( 100% в идеальном случае, ширина ввода минус промежуток, чтобы решить проблему рендеринга в Chrome и Firefox) и имеет высоту 2 пикселя — это компонент размера фона фона .

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор

Дин Хидри
28 сентября 2016 г.

О коде

Поле ввода электронной почты

Просто красивое маленькое поле ввода.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Бен Милдрен
9 марта 2015 г.

О коде

Входной текст Material Design

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор

Крис Севилья
9 июля 2014 г.

О коде

Поля ввода Google Material Design

CSS-эксперимент по воссозданию полей ввода Google Material Design Polymer в CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

О коде

Необычный ввод текста

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор

Дэнни Кинг
26 апреля 2014 г.

О коде

Адаптивный заполнитель

После активации входные заполнители становятся входными метками.

Автор

Майкл Арестад
8 августа 2013 г.

О коде

Ввод текста

Я хотел поиграть с некоторыми стилями input , которые не зависят от наведения, не добавляют беспорядка, всегда показывают метку и отображают текст заполнитель , когда это действительно актуально.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

адаптивный: да

Зависимости: —

html — как сделать так, чтобы ввод и выбор хорошо смотрелся рядом друг с другом с настраиваемой высотой?

Переполнение стека

Около
Продукты
Для команд

Переполнение стека
Общественные вопросы и ответы
Переполнение стека для команд
Где разработчики и технологи делятся частными знаниями с коллегами
Вакансии
Программирование и связанные с ним технические возможности карьерного роста
Талант
Нанимайте технических специалистов и создавайте свой бренд работодателя
Реклама
Обратитесь к разработчикам и технологам со всего мира
О компании

Загрузка…

W3.CSS Вход

Форма ввода

Пример

Ввод с полями

Добавьте класс w3-border для создания входов с рамкой:

Закругленные границы

Используйте любой из классов w3-round для создания закругленных границ:

Вход без полей

По умолчанию класс w3-input имеет нижнюю границу.Если вам нужен ввод без полей, добавьте w3-border-0 class:

Пример

Цвета

Не стесняйтесь использовать свои любимые стили и цвета:

Пример

Подвижные вводы

Классы w3-hover- color добавляют цвет фона в поле ввода при наведении указателя мыши:

Пример

Анимированные входы

Класс w3-animate-input преобразует ширину поля ввода до 100%, когда он получает фокус:

Пример

<ввод type = "radio" name = "пол" value = "женский">
Женский

Выбрать опции

Выберите свой вариант Вариант 1 Вариант 2 Вариант 3

Пример

Меню выбора с рамкой

Выберите свой вариант Вариант 1 Вариант 2 Вариант 3

Элементы формы в сетке

В этом примере мы используем W3.Система адаптивной сетки CSS, чтобы входные данные отображались в одной строке (на экранах меньшего размера они будут располагаться горизонтально со 100% шириной).
Вы узнаете об этом позже.

Красивый css input: Делаем красивую форму на HTML и CSS.

Стилизация input с примерами — Сверхновая DIGITAL-маркетинг

input

Стилизация textarea

Стилизация input radio

Стилизация input checkbox

Стилизация select

Стилизация Input file

Стилизация input reset

Стилизация input submit

Стилизация button

Красивая стилизация input type с помощью CSS3

Шаг 1. CSS

Вот и все. Готово!

Читайте также:

Поля ввода input в стиле Google Material Design на CSS3

1. HTML-разметка

2. Анимирование input’ов

3. Результат работы

Стилизация формы с помощью CSS

Теория и практика

Оформление поля input

Оформление поля textarea

Посмотреть примерСкачать

Картинка вместо кнопки input

Посмотреть примерСкачать

Больше практикуйтесь!

Делаем красивые кнопки выбора (стилизация radio input)

Разметка

Стили

Результат

Список псевдоэлементов для стилизации элементов управления формы — CSS-LIVE

Содержание

input[type=button]

Gecko

input[type=checkbox] / input[type=radio]

Trident

input[type=color]

WebKit

input[type=date]

WebKit

input[type=file]

Trident

WebKit

input[type=number]

WebKit

input[type=password]

Trident

placeholder Attribute

Gecko

Trident

WebKit

input[type=range]

Gecko

Trident

WebKit

input[type=reset]

Gecko

input[type=search]

WebKit

input[type=submit]

Gecko

input[type=text]

Trident

Управление удалением введенных символов

Элемент <button>

Gecko

<keygen> Element

WebKit

<meter> Element

<progress> Element

WebKit

Gecko

Trident

<select> Element

Trident

<textarea> Element

WebKit

Всплывающие сообщения валидации формы

WebKit