Оформление элементов управления "флажок" (HTML)

Статья
03/04/2016

[ Эта статья адресована разработчикам приложений среды выполнения Windows для Windows 8.x и Windows Phone 8.x. В случае разработки приложений для Windows 10 см. раздел последняя документация]

Существует множество свойств CSS и псевдоклассов, которые можно использовать для стилизации checkbox. В данном руководстве описаны некоторые наиболее часто используемые свойства и псевдоклассы.

Что необходимо знать

Технологии

Необходимые условия

Краткое руководство: добавление элементов управления "Флажок"

Полезные свойства CSS

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

background
Определяет фон поверхности checkbox. В данном примере для флажка создается фон в виде градиента.

#backgroundExampleCheckbox {
    background: -ms-linear-gradient(green, blue );
}

    <label>
        <input id="backgroundExampleCheckbox" type="checkbox" />Option
    </label>

Флажок с фоном в виде градиента

border
Определяет толщину, тип линии и цвет границы checkbox.

В данном примере для флажка создается красная граница.
```
#borderExampleCheckbox {
    border: 1px solid red;
}
```
```
    <label>
        <input id="borderExampleCheckbox" type="checkbox" />Option
    </label>
```

(Обратите внимание, что это не полный список свойств, которые вы можете использовать. Полный список всех свойств CSS см. в справочнике по каскадным таблицам стилей.)

Псевдоэлементы для стилизации элементов управления "Флажок"

Элемент управления checkbox предоставляет этот псевдоэлемент, который вы можете использовать в качестве селектора для стилизации определенной части элемента управления:

::-ms-check
Применяет один или несколько стилей к значку флажка.

В данном примере создается значок флажка зеленого цвета.
```
#checkExampleCheckbox::-ms-check {
    color: green;
}
```
```
    <label>
        <input id="checkExampleCheckbox" type="checkbox" checked />Option
    </label>
```

Псевдоклассы для стилизации элементов управления "Флажок"

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

:checked
Применяет стили к элементу управления checkbox в установленном состоянии.
:indeterminate
Применяет стили к элементу управления checkbox в неопределенном состоянии.
:hover
Применяет стили к элементу управления checkbox, когда пользователь наводит курсор на checkbox, но не активирует его нажатием.
:active
Применяет стили к элементу управления checkbox, когда он активен. checkbox активен между моментами, когда пользователь нажимает на элемент управления и отпускает его. Если пользователь нажимает на элемент управления и убирает указатель с checkbox, элемент управления будет по-прежнему активен, пока пользователь не отпустит указатель.
:focus
Применяет стили к элементу управления checkbox, когда он получает фокус. Есть несколько способов передать фокус элементу checkbox:
- Укажите на checkbox с помощью указывающего устройства.
- Перейдите к checkbox с помощью клавиш TAB и SHIFT+TAB.
- Выберите checkbox с помощью keyboard shortcut.
:disabled
Применяет стили к элементу управления checkbox, когда он отключен. Чтобы отключить элемент управления checkbox, добавьте атрибут disabled в его HTML-код или задайте для свойства disabled значение true в JavaScript.

(Подробно о различных сочетаниях псевдоклассов с другими селекторами см. в разделе Основные сведения о селекторах CSS.)

Связанные разделы

Пример основных элементов управления HTML

Краткое руководство: добавление элементов управления "Флажок"

Руководство и контрольный список для элементов управления "Флажок"

Share via