Partilhar via

Como definir o estilo de controles de caixa de seleção (HTML)

  • Artigo

[ Este artigo destina-se aos desenvolvedores do Windows 8.x e do Windows Phone 8.x que escrevem aplicativos do Windows Runtime. Se você estiver desenvolvendo para o Windows 10, consulte documentação mais recente ]

Existem muitas propriedades e pseudoclasses CSS que você pode usar para definir o estilo de um checkbox. Este tópico descreve algumas das propriedades e pseudoclasses mais usadas.

O que você precisa saber

Tecnologias

Pré-requisitos

Propriedades CSS úteis

A CSS fornece muitas propriedades que você pode usar para definir o estilo de elementos HTML. Mas a lista dessas propriedades é longa e seria desanimador ver uma a uma. Aqui está uma lista curta das propriedades CSS que são particularmente úteis para definir o estilo do controle de checkbox.

  • background
    Especifica a tela de fundo da face da checkbox. Este exemplo deixa a caixa de seleção com uma tela de fundo com gradiente.

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

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

    Caixa de seleção com uma tela de fundo com gradiente

  • border
    Especifica a espessura, o estilo da linha e a cor da borda da checkbox.

    Este exemplo deixa a caixa de seleção com uma borda vermelha.

    #borderExampleCheckbox {
    border: 1px solid red;
}

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

    Caixa de seleção com uma borda vermelha

(Observe que esta lista não abrange tudo o que você pode usar. Para obter uma lista completa de todas as propriedades CSS, veja a referência Folhas de Estilos em Cascata.)

Pseudoelementos para definir o estilo de controles de caixa de seleção

O controle de checkbox fornece os seguintes pseudoelementos, que você pode usar como seletores para definir o estilo de partes específicas do controle:

  • ::-ms-check
    Aplica um ou mais estilos à marcação da caixa de seleção.

    Este exemplo deixa uma marcação da caixa de seleção verde.

    #checkExampleCheckbox::-ms-check {
    color: green;
}

        <label>
        <input id="checkExampleCheckbox" type="checkbox" checked />Option
    </label>

Pseudoclasses para definir o estilo de controles de caixa de seleção

Este controle oferece suporte às seguintes pseudoclasses que você pode usar como seletores para definir o estilo do controle quando está em determinados estados.

  • :checked
    Aplica estilos a uma checkbox no estado marcada.

  • :indeterminate
    Aplica estilos a uma checkbox no estado indeterminado.

  • :hover
    Aplica estilos a uma checkbox quando o usuário coloca o cursor sobre a checkbox, mas não a ativa com o clique.

  • :active
    Aplica estilos a um controle de checkbox quando ele está habilitado. O checkbox é ativado entre o momento em que o usuário pressiona o controle e libera o controle. Se o usuário pressionar o controle e arrastar o ponteiro para fora da checkbox, o controle ainda permanecerá habilitado até o usuário liberar o ponteiro.

  • :focus
    Aplica estilos a um controle de checkbox quando ele está focalizado. Existem várias formas de dar foco a um checkbox:

  • :disabled
    Aplica estilos a um controle de checkbox quando ele está desabilitado. Para desabilitar uma checkbox, adicione o atributo disabled ao respectivo HTML ou defina a propriedade disabled como true em JavaScript.

(para saber mais sobre as diferentes formas de combinação de pseudoclasses e outros seletores, veja Noções básicas de seletores CSS).

Tópicos relacionados

Amostra de controles HTML essenciais

Início rápido: adicionando controles de caixa de seleção

Diretrizes e lista de verificação de controles de caixa de seleção