Формы

Обновлено: 20.01.2023

Формы

Изменение вида и поведения элементов форм.

  • Псевдокласс :checked

    Псевдокласс :checked

    Псевдокласс :checked применяется к элементам интерфейса, таким как переключатели (checkbox), флажки (radio) и пункты списка (option), когда они находятся в положение «включено». Переключение элементов в такое состояние происходит с помощью атрибута checked элемента <input> или пользователем.

  • Псевдокласс :default

    Псевдокласс :default

    Псевдокласс :default применяет стиль к элементам форм, которые установлены по умолчанию в группе похожих элементов. Например, у нас может быть две кнопки для отправки данных формы на сервер. Одна из этих кнопок задана по умолчанию, мы можем изменить её стиль через :default.

  • Псевдокласс :disabled

    Псевдокласс :disabled

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

  • Псевдокласс :enabled

    Псевдокласс :enabled

    Псевдокласс :enabled используется для применения стиля к доступным (не заблокированным) элементам форм. По умолчанию, все элементы форм являются доступными, если в коде HTML к ним не добавляется атрибут disabled.

  • Псевдоклас :in-range

    Псевдоклас :in-range

    Застосовується до елементів форм, у яких введене користувачем значення знаходиться в заздалегідь заданому діапазоні. Сам діапазон встановлюється за допомогою атрибутів min і max, вони, відповідно, задають мінімальне і максимальне значення.

  • Псевдокласс :invalid

    Псевдокласс :invalid

    Применяется к полям формы, содержимое которых не соответствует указанному типу. Например, для type="number" должно вводиться число, а не буквы, для type="email" корректный адрес электронной почты.

  • Псевдокласс :optional

    Псевдокласс :optional

    Применяет стилевые правила к элементу <input>, у которого не задан атрибут required, он позволяет выделять поля обязательные к заполнению перед отправкой формы. Таким образом :optional применяется к необязательным полям формы.

  • Псевдокласс :out-of-range

    Псевдокласс :out-of-range

    Применяется к полям форм, у которых введённое пользователем значение выходит из заданного диапазона. Псевдокласс работает только для тех полей, где пользователь может сам ввести значение, даже несмотря на ограничения наложенные атрибутами min и max.

  • Псевдокласс :read-only

    Псевдокласс :read-only

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

  • Псевдокласс :read-write

    Псевдокласс :read-write

    Применяется к полям формы, доступных для изменения. Псевдокласс :read-write является противоположным по своему действию :read-only, который применяется к полям с атрибутом readonly (только для чтения).

  • Псевдокласс :required

    Псевдокласс :required

    Применяет стилевые правила к элементу <input>, у которого установлен атрибут required, он позволяет выделять поля обязательные к заполнению перед отправкой формы.

  • Псевдокласс :valid

    Псевдокласс :valid

    Применяется к полям формы, содержимое которых проходит проверку в браузере на соответствие указанному типу. Например, для type="number" вводится число, а не буквы, для type="email" корректный адрес электронной почты.

  • ::-ms-browse

    ::-ms-browse

    Позволяет задать стиль кнопки «Обзор» при загрузке файлов через <input type="file">.

  • ::-ms-check

    ::-ms-check

    Задаёт стиль переключателей (input type="radio") и флажков (input type="checkbox").

  • ::-ms-clear

    ::-ms-clear

    Задаёт стиль кнопки для очистки текстового поля. Исходно эта кнопка не видна, она появляется в правой части поля только при вводе текста.

  • ::-ms-expand

    ::-ms-expand

    Задаёт стиль кнопки раскрытия списка, созданного с помощью элемента <select>.

  • ::-ms-fill

    ::-ms-fill

    Задаёт стиль индикатора элемента <progress>. Само значение индикатора и его положение меняется динамически посредством скриптов.

  • ::-ms-fill-lower

    ::-ms-fill-lower

    Задаёт стиль слайдера (input type="range"). Стиль применяется к дорожке слайдера от меньшего значения до текущего значения, где располагается ползунок.

  • ::-ms-fill-upper

    ::-ms-fill-upper

    Задаёт стиль слайдера (input type="range"). Стиль применяется к дорожке слайдера от текущего значения, где располагается ползунок, до максимального значения слайдера.

  • ::-ms-reveal

    ::-ms-reveal

    Задає стиль кнопки для перегляду пароля в полі <input type="password">. Кнопку початково не видно і вона з'являється в правій частині поля під час введення пароля (рис. 1). Якщо клацнути по цій кнопці й утримувати ліву кнопку миші, то замість крапок буде показано пароль, що вводиться.

  • ::-ms-thumb

    ::-ms-thumb

    Задаёт стиль ползунка для слайдера (input type="range").

  • ::-ms-ticks-after

    ::-ms-ticks-after

    Применяет стилевые параметры к делениям ниже дорожки слайдера (input type="range"). По умолчанию эти деления не отображаются и чтобы они стали видны, в стилях следует добавить свойство display со значением block.

  • ::-ms-ticks-before

    ::-ms-ticks-before

    Применяет стилевые параметры к делениям выше дорожки слайдера (input type="range"). По умолчанию эти деления не отображаются и чтобы они стали видны, в стилях следует добавить свойство display со значением block.

  • ::-ms-tooltip

    ::-ms-tooltip

    Применяет стилевые параметры к всплывающей подсказке слайдера (input type="range"), где отображается выбранное текущее значение. Допустимо задавать только свойства display и visibility.

  • ::-ms-track

    ::-ms-track

    Задаёт стиль дорожки ползунка для слайдера (input type="range").

  • ::-ms-value

    ::-ms-value

    Позволяет изменять стиль элементов формы, сделанных с помощью <input> или <select>.