:checked

    0
    373

    :checked — псевдокласс, который срабатывает как только элементы типа <input type="radio"> или <input type="checkbox"> были выбраны.

    Таким образом, данный псевдокласс стилизует выбранные пользователем элементы «включателей». Также работает на элементах <option></option> в списке <select></select>.

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

    Правила стилей срабатывают даже в том случае, если элементы включены явно, т.е. с использованием html атрибута — checked.

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

    Тонкости & Особенности

    Существует еще не определенное состояние чекбоксов и радио кнопок. Третье состояние можно получить используя манипуляции DOM деревом посредством Javascript. Подробнее в описании псевдокласса :indeterminate.

    Для эффективного использования :checked, можно создавать визуальные подсказки для пользователей, чтобы было легче различать оба состояния этих полей, т.е. когда они включены или выключены. Рассмотрим пример.

    Поддержка браузерами

    Псевдокласс :checked поддерживается в Chrome, Firefox, Safari, Opera 9+, Internet Explorer 8+, на Android и iOS.

    Стили для элементов <option> в списке <select> не работают в браузере Firefox.

    ПОДЕЛИТЬСЯ
    Предыдущая статья:active
    Следующая статья:default
    Постоянный автор на exabyte.ws. Специализируюсь на Wordpress, Javascript & jQ, REST API. Любые вопросы связанные с Web разработкой вы можете задать лично или в группе вконтакте.

    ОСТАВЬТЕ ОТВЕТ

    Пожалуйста оставьте комментарий!
    Введите ваше имя