Форми

Оновлено: 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>.