Как стилизовать input css

Стилизация текстовых полей формы

Александр Мальцев

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

Введение

Веб-формы являются неотъемлемой частью многих веб-сайтов. Они позволяют пользователю ввести те или иные данные, которые затем отправляются на сервер или обрабатываются на стороне клиента, например, для изменения интерфейса.

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

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

Исходные коды примеров расположены на GitHub в папке text-field проекта «ui-components».

Нормализация стилей

1. Настройка box-sizing .

Обычно хорошей практикой считается для всех элементов включая псевдоэлементы установить box-sizing: border-box :

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

2. Нормализация стилей <input> .

Для того чтобы <input> в разных браузерах отображался как можно более одинаково необходимо добавить следующее:

Базовый вариант оформления input

Для удобного добавления к элементам стилей создадим следующую HTML-разметку:

Т.е. добавим к <input> с type="text" класс text-field__input , к <label> – text-field__label , а затем обернём их в элемент <div> с классом text-field .

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

Примененные CSS свойства к элементу <input> , и то, что они делают:

  • display: block – устанавливает блочное отображение;
  • width: 100% – занимает всю доступную ширину;
  • height: calc(2.25rem + 2px) – высота элемента определяется путём сложения 2.25rem ( font-size * line-height + padding-top + padding-bottom ) и 2px (ширина верхней и нижней границы);
  • margin: 0 – убирает margin отступы;
  • padding: 0.375rem 0.75rem – внутренние поля: сверху и снизу – 0.375rem, а слева и справа – 0.75rem;
  • font-family: inherit – чтобы шрифт был такой как у родительского элемента, а не тот который браузер по умолчанию назначает для <input> ;
  • font-size: 1rem – устанавливает явный размер шрифта, иначе будет браться из стилей браузера для <input> ;
  • font-weight: 400 – задаёт начертание шрифта;
  • line-height: 1.5 – высота строки (1.5 * размер шрифта);
  • color: #212529 – цвет шрифта;
  • background-color: #fff – цвет фона;
  • background-clip: padding-box – указывает, что фон (фоновое изображение) нужно рисовать только до внешнего края отступа (под границей не выводить);
  • border: 1px solid #bdbdbd – устанавливает границу, у которой: 1px (толщина), solid (тип линии) и #bdbdbd (цвет);
  • border-radius: 0.25rem – радиус скругления углов;
  • transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out – выполняет изменение значений свойств border-color и box-shadow с анимацией длительностью 0.15 секунд посредством временной функцией ease-in-out .

В результате получили следующее оформление:

Базовый вариант стилизации текстовых input

Стилизуем плейсхолдер . По умолчанию плейсхолдер отображается полупрозрачным или светло-серым цветом. Получить его можно с помощью ::placeholder . Оформим его следующим образом:

Стилизация плейсхолдера в input

Стили для <input> в состоянии фокуса (получить это состояние можно с помощью псевдокласса :focus ):

Стилизация input в состоянии фокуса

Оформление <input> , когда он находится в состоянии disabled и readonly :

Стилизация input в состоянии disabled и readonly

Этот набор стилей будет у нас отправной точкой для создания других.

input с иконкой

Рассмотрим пример вставки в input иконки с помощью псевдоэлементов.

Для этого дополнительно обернём элемент <input> в <div> с классами text-field__icon text-field__icon_email :

Первый класс ( text-field__icon ) будем использовать для того, чтобы установить относительное позиционирование ( position: relative ). Это действие позволит нам разместить иконку в нужном месте относительно input , используя уже абсолютное позиционирование ( position: absolute ). Второй класс ( text-field__icon_email ) будет определять иконку, которую мы хотим вставить.

Ещё один вариант оформления:

input с активной svg-иконкой

В этом примере поместим в input иконку, на которую можно нажать.

Для этого мы также как и в предыдущем примере обернули <input> в <div >. <div> . Саму svg-иконку обернули в <span> с классом text-field__aicon и поместили рядом с <input> .

Оформление выполнили так:

Ещё пример вставки иконки в input :

input с кнопкой

HTML-разметка input с кнопкой:

Расположение кнопки справа от input выполним с помощью флексов:

input с плавающим label

Разметка input с плавающим label:

Пример оформления input с плавающим label

Ещё один вариант с «плавающей» меткой:

Пример оформления input с плавающим label

Пример оформления input с плавающим label

input со счётчиком символов

Пример в котором под input отображается количество набранных символов и максимальная длина:

Пример оформления input со счётчиком символов

Это выполняется посредством следующего кода:

Стили для отображения состояния валидации input

Применить стили в зависимости от состояния поля в CSS можно с помощью специальных псевдоклассов. Например, :valid позволяет выбрать валидные элементы, а :invalid — не валидные.

Но, если вы хотите контролировать этот процесс и добавлять стили с помощью JavaScript, то тогда лучше это делать через классы. Например, использовать класс text-field__input_valid при успешной валидации, а text-field__input_invalid — при не успешной. Их следует добавлять к <input> .

Отображать сообщения пользователю или подсказки можно через <div >. </div> .

Пример оформления input для отображения состояния валидации

Для <input> с плавающим <label> :

Пример оформления input для отображения состояния валидации

Пример оформления input для отображения состояния валидации

Пример оформления input для отображения состояния валидации

Пример валидации формы с помощью JavaScript

Валидацию элементов формы будем осуществлять с помощью функции checkValidity() . После этого, в зависимости от её результата, будем добавлять той или иной класс к <input> , а также сообщение ( input.validationMessage ) в элемент .text-field__message .

Т.к. мы будем сами отображать сообщения, то необходимо отключить стандартные подсказки браузера. Для этого к тегу <form> необходимо добавить атрибут novalidate :

Стили HTML форм

В этой статье Вы узнает, как использовать CSS с HTML-формами, чтобы сделать их (надеюсь) более красивыми. Удивительно, но это может быть немного сложнее. По историческим и техническим причинам виджеты форм плохо сочетаются с CSS. Из-за этих трудностей многие разработчики предпочитают создавать свои собственные HTML-виджеты, чтобы получить контроль над своим внешним видом. Однако в современных браузерах веб-дизайнеры все больше контролируют дизайн элементов формы. Давайте приступим!

Почему так сложно стилизовать виджеты форм с помощью CSS?

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

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

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

Даже сегодня ни один браузер полностью не реализует CSS 2.1. Однако со временем поставщики браузеров улучшили свою поддержку CSS для элементов формы, и, несмотря на плохую репутацию в отношении удобства использования, теперь вы можете использовать CSS для стилизации HTML форм.

Не все виджеты созданы равными, когда задействован CSS

В настоящее время некоторые трудности остаются при использовании CSS с формами. Эти проблемы можно разделить на три категории:

Хорошая

Некоторые элементы могут быть стилизованы с небольшим количеством проблем на разных платформах. К ним относятся следующие структурные элементы:

Сюда также входят все виджеты текстового поля (как однострочные, так и многострочные) и кнопки.

Плохая

Некоторые элементы редко могут быть стилизованы, и могут потребовать некоторых сложных уловок, иногда требующих углублённых знаний CSS3.

Они включают в себя элемент <legend> , но его нельзя правильно расположить на всех платформах. Флажки и переключатели также не могут быть стилизованы напрямую, однако, благодаря CSS3 вы можете обойти это. Контент placeholder не может быть стилизован каким-либо стандартным способом, однако все браузеры, которые его реализуют, также реализуют собственные псевдо-элементы CSS или псевдоклассы, которые позволяют его стилизовать.

Мы опишем, как обрабатывать эти более конкретные случаи, в статье «Расширенные стили для HTML-форм».

The ugly

Some elements simply can’t be styled using CSS. These include: all advanced user interface widgets, such as range, color, or date controls; and all the dropdown widgets, including <select> , <option> , <optgroup> and <datalist> elements. The file picker widget is also known not to be stylable at all. The new <progress> and <meter> elements also fall in this category.

The main issue with all these widgets, comes from the fact that they have a very complex structure, and CSS is not currently expressive enough to style all the subtle parts of those widgets. If you want to customize those widgets, you have to rely on JavaScript to build a DOM tree you’ll be able to style. We explore how to do this in the article How to build custom form widgets.

Basic styling

To style elements that are easy to style with CSS, you shouldn’t face any difficulties, since they mostly behave like any other HTML element. However, the user-agent style sheet of every browser can be a little inconsistent, so there are a few tricks that can help you style them in an easier way.

Search fields

Search boxes are the only kind of text fields that can be a little tricky to style. On WebKit based browsers (Chrome, Safari, etc.), you’ll have to tweak it with the -webkit-appearance proprietary property. We discuss this property further in the article: Advanced styling for HTML forms.

Example

This is a screenshot of a search filed on Chrome, with and without the use of -webkit-appearance

As you can see on this screenshot of the search field on Chrome, the two fields have a border set as in our example. The first field is rendered without using the -webkit-appearance property, whereas the second is rendered using -webkit-appearance:none . This difference is noticeable.

Fonts and text

CSS font and text features can be used easily with any widget (and yes, you can use @font-face with form widgets). However, browsers’ behaviors are often inconsistent. By default, some widgets do not inherit font-family and font-size from their parents. Many browsers use the system default appearance instead. To make your forms’ appearance consistent with the rest of your content, you can add the following rules to your stylesheet:

The screenshot below shows the difference; on the left is the default rendering of the element in Firefox on Mac OS X, with the platform’s default font style in use. On the right are the same elements, with our font harmonization style rules applied.

This is a screenshot of the main form widgets on Firefox on Mac OSX, with and without font harmonization

There’s a lot of debate as to whether forms look better using the system default styles, or customized styles designed to match your content. This decision is yours to make, as the designer of your site, or Web application.

Box model

All text fields have complete support for every property related to the CSS box model ( width , height , padding , margin , and border ). As before, however, browsers rely on the system default styles when displaying these widgets. It’s up to you to define how you wish to blend them into your content. If you want to keep the native look and feel of the widgets, you’ll face a little difficulty if you want to give them a consistent size.

This is because each widget has their own rules for border, padding and margin. So if you want to give the same size to several different widgets, you have to use the box-sizing property:

This is a screenshot of the main form widgets on Chrome on Windows 7, with and without the use of box-sizing.

In the screenshot above, the left column is built without box-sizing , while the right column uses this property with the value border-box . Notice how this lets us ensure that all of the elements occupy the same amount of space, despite the platform’s default rules for each kind of widget.

Positioning

Positioning of HTML form widgets is generally not a problem; however, there are two elements you should take special note of:

legend

The <legend> element is okay to style, except for positioning. In every browser, the <legend> element is positioned on top of the top border of its <fieldset> parent. There is absolutely no way to change it to be positioned within the HTML flow, away from the top border. You can, however, position it absolutely or relatively, using the position property. But otherwise it is part of the fieldset border.

Because the <legend> element is very important for accessibility reasons, it will be spoken by assistive technologies as part of the label of each form element inside the fieldset, it’s quite often paired with a title, and then hidden in an accessible way. For example:

textarea

By default, all browsers consider the <textarea> (en-US) element to be an inline block, aligned to the text bottom line. This is rarely what we actually want to see. To change from inline-block to block , it’s pretty easy to use the display property. But if you want to use it inline, it’s common to change the vertical alignment:

Example

Let’s look at a concrete example of how to style an HTML form. This will help make a lot of these ideas clearer. We will build the following "postcard" contact form:

This is what we want to achieve with HTML and CSS

If you want to follow along with this example, make a local copy of our postcard-start.html file, and follow the below instructions.

The HTML

The HTML is only slightly more involved than the example we used in the first article of this guide; it just has a few extra IDs and a title.

Add the above code into the body of your HTML.

Organizing your assets

This is where the fun begins! Before we start coding, we need three additional assets:

  1. The postcard background — download this image and save it in the same directory as your working HTML file.
  2. A typewriter font: The "Secret Typewriter" font from fontsquirrel.com — download the TTF file into the same directory as above.
  3. A handdrawn font: The "Journal" font from fontsquirrel.com — download the TTF file into the same directory as above.

Your fonts need some more processing before you start:

  1. Go to the fontsquirrel Webfont Generator.
  2. Using the form, upload both your font files and generate a webfont kit. Download the kit to your computer.
  3. Unzip the provided zip file.
  4. Inside the unzipped contents you will find two .woff files and two .woff2 files. Copy these four files into a directory called fonts, in the same directory as before. We are using two different files for each font to maximise browser compatibility; see our Web fonts article for a lot more information.

The CSS

Now we can dig into the CSS for the example. Add all the code blocks shown below inside the <style> element, one after another.

First, we prepare the ground by defining our @font-face rules, all the basics on the <body> element, and the <form> element:

Now we can position our elements, including the title and all the form elements:

That’s where we start working on the form elements themselves. First, let’s ensure that the <label> s are given the right font:

The text fields require some common rules. Simply put, we remove their borders and backgrounds , and redefine their padding and margin :

When one of these fields gains focus, we highlight them with a light grey, transparent, background. Note that it’s important to add the outline (en-US) property, in order to remove the default focus highlight added by some browsers:

Now that our text fields are complete, we need to adjust the display of the single and multiple line text fields to match, since they won’t typically look the same using the defaults.

The single-line text field needs some tweaks to render nicely in Internet Explorer. Internet Explorer does not define the height of the fields based on the natural height of the font (which is the behavior of all other browsers). To fix this, we need to add an explicit height to the field, as follows:

<textarea> (en-US) elements default to being rendered as a block element. The two important things here are the resize (en-US) and overflow properties. Because our design is a fixed-size design, we will use the resize property to prevent users from resizing our multi-line text field. The overflow property is used to make the field render more consistently across browsers. Some browsers default to the value auto , while some default to the value scroll . In our case, it’s better to be sure every one will use auto :

The <button> element is really convenient with CSS; you can do whatever you want, even using pseudo-elements:

Note: If your example does not work quite like you expected and you want to check it against our version, you can find it on GitHub — see it running live (also see the source code).

Conclusion

As you can see, as long as we want to build forms with just text fields and buttons, it’s easy to style them using CSS. If you want to know more of the little CSS tricks that can make your life easier when working with form widgets, take a look at the form part of the normalize.css project.

In the next article, we will see how to handle form widgets which fall in the "bad" and "ugly" categories.

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

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

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

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

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

Содержание

  • Элементы <input>

input[type=button]

Gecko

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

Trident

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

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

trident-radio-checkbox

input[type=color]

WebKit

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

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

webkit-input-color

input[type=date]

WebKit

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

  • ::-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

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

webkit-input-date-shadow

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

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

webkit-input-date

input[type=file]

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

Trident

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

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

trident-input-file

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 нужны для кастомизации. Хотя вы не можете делать массу вещей с этими элементами, тем не менее, может быть полезно скрыть эти кнопки.

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

webkit-input-number

input[type=password]

Trident

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

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

trident-input-password

placeholder Attribute

Gecko

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

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

gecko-placeholder

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

Trident

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

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

trident-placeholder

WebKit

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

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

webkit-placeholder

input[type=range]

Gecko

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

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

gecko-input-range

Trident

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

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

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

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

trident-input-range

WebKit

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

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

webkit-input-range

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

input[type=reset]

Gecko

input[type=search]

WebKit

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

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

webkit-input-search

input[type=submit]

Gecko

input[type=text]

Trident

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

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

trident-value

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

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

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

trident-input-clear

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

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

trident-input-clear-fancy

Элемент <button>

Gecko

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

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

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

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

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

<keygen> Element

WebKit

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

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

webkit-keygen

<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>.

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

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

webkit-meter

<progress> Element

WebKit

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

webkit-progress-shadow

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

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

webkit-progress

Gecko

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

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

gecko-progress

Trident

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

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

trident-progress

<select> Element

Trident

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

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

trident-select

<textarea> Element

WebKit

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

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

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

webkit-textarea-hide

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

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

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

webkit-textarea-style

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

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

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

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

webkit-validation-bubble

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

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

webkit-validation-bubble-pretty

Вот и всё!

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *