W3docs
pt
Entrar

CSS :checked Pseudo Class

Use a pseudo-classe :checked do CSS para selecionar e estilizar elementos <input> e <option>. Leia sobre a pseudo-classe e pratique com exemplos.

A pseudo-classe :checked seleciona elementos que estão atualmente no estado marcado (selecionado). Ela se aplica a apenas três tipos de elementos:

  • <input type="checkbox"> quando a caixa está marcada,
  • <input type="radio"> quando o botão de rádio está selecionado,
  • elementos <option> (dentro de um <select> ou <datalist>) que estão atualmente escolhidos.

Como esses controles são alternados entre "ligado" e "desligado" pelo usuário, :checked é uma pseudo-classe dinâmica: os estilos definidos sob ela se aplicam apenas enquanto o controle está no estado ligado, e o navegador os reavalia no momento em que o usuário clica. Isso a torna a base da interatividade apenas com CSS — é possível criar toggles, acordeões, abas e controles de formulário com estilo personalizado sem uma única linha de JavaScript.

Esta página aborda o que :checked corresponde, como combiná-la com combinadores de irmãos para estilizar outros elementos (a maioria dos usos reais faz isso), três exemplos executáveis e os pontos de acessibilidade a serem considerados.

Como :checked funciona com combinadores

:checked por si só só pode estilizar o próprio controle, e caixas de seleção/rádios nativos são difíceis de reestilizar. O verdadeiro poder vem ao combiná-la com um combinador, de modo que um input marcado estiliza um elemento vizinho:

  • Irmão adjacente (+) — input:checked + label estiliza o rótulo que segue imediatamente um input marcado.
  • Irmão geral (~) — input:checked ~ .panel estiliza qualquer irmão posterior, permitindo que uma caixa de seleção revele uma seção inteira.

Um padrão comum é ocultar visualmente o input real e deixar o usuário clicar em um <label> vinculado a ele (clicar em um rótulo alterna o controle associado). A caixa de seleção permanece na árvore de acessibilidade, mas você controla os visuais por meio de :checked e do rótulo.

Versão

HTML Living Standard

HTML5

Selectors Level 4

Sintaxe

Exemplo de sintaxe CSS :checked

:checked {
  css declarations;
}

No exemplo a seguir, marque a caixa de seleção para ver como funciona.

Exemplo do seletor :checked com a tag <div>:

Exemplo de código CSS :checked

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        margin: 10px;
        font-size: 20px;
      }
      input:checked + label {
        color: #000;
      }
      input[type="radio"]:checked {
        box-shadow: 0 0 0 4px #8ebf42;
      }
        /* Checkbox element, when checked */
        input[type="checkbox"]:checked {
        box-shadow: 0 0 0 3px #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>:checked selector example</h2>
    <div>
      <input type="radio" name="my-input" id="yes" />
      <label for="yes">Yes</label>
      <input type="radio" name="my-input" id="no" />
      <label for="no">No</label>
    </div>
    <div>
      <input type="checkbox" name="my-checkbox" id="opt-in" />
      <label for="opt-in">Check!</label>
    </div>
  </body>
</html>
Experimente Você Mesmo »

Exemplo do seletor :checked com as tags <table>, <tr>, <th>, <td>:

Exemplo de imitação de clique CSS :checked

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table,tr,th,td {
        border: 1px solid #ccc;
        text-align: center;
        border-collapse: collapse;
        padding: 8px;
      }
      #toggle {
        display: none;
      }
      .expandable {
        visibility: collapse;
        background: #1c87c9;
      }
      #btn {
        display: inline-block;
        margin-top: 15px;
        padding: 10px 20px;
        background-color: #8ebf42;
        color: #fff;
        cursor: pointer;
        border-radius: 3px;
      }
      #toggle:checked ~ * .expandable {
        visibility: visible;
      }
      #toggle:checked ~ #btn {
        background-color: #ccc;
      }
    </style>
  </head>
  <body>
    <h2>:checked selector example</h2>
    <input type="checkbox" id="toggle" />
    <table>
      <thead>
        <tr>
          <th>Column 1</th>
          <th>Column 2</th>
          <th>Column 3</th>
        </tr>
      </thead>
      <tbody>
        <tr class="expandable">
          <td>[more text]</td>
          <td>[more text]</td>
          <td>[more text]</td>
        </tr>
        <tr>
          <td>[text]</td>
          <td>[text]</td>
          <td>[text]</td>
        </tr>
        <tr class="expandable">
          <td>[more text]</td>
          <td>[more text]</td>
          <td>[more text]</td>
        </tr>
        <tr>
          <td>[text]</td>
          <td>[text]</td>
          <td>[text]</td>
        </tr>
        <tr class="expandable">
          <td>[more text]</td>
          <td>[more text]</td>
          <td>[more text]</td>
        </tr>
      </tbody>
    </table>
    <label for="toggle" id="btn">Click here!</label>
  </body>
</html>
Experimente Você Mesmo »

Exemplo do seletor :checked:

Exemplo da Pseudo-Classe CSS :checked:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      input[type=checkbox] {
        vertical-align:middle;
      }
      input[type=checkbox] + label {
        color: #999999;
        font-style: normal;
      } 
      input[type=checkbox]:checked + label {
        color: #8ebf42;
        font-style: italic;
        font-weight:bold;
      } 
    </style>
  </head>
  <body>
    <h2>:checked selector example</h2>
    <form>
      <input type="checkbox" id="css" name="css" /> 
      <label for="css">Here is CSS example.</label> 
    </form>
  </body>
</html>
Experimente Você Mesmo »

Portanto, a pseudo-classe :checked pode ser usada para tornar formulários mais interativos e para criar widgets com inputs ocultos e seus rótulos visíveis.

Casos de uso comuns

  • Caixas de seleção e rádios personalizados. Oculte o controle nativo com appearance: none (ou recortando-o) e desenhe seu próprio indicador que reage a input:checked.
  • Painéis de toggle / "mostrar mais". Uma caixa de seleção oculta mais :checked ~ .panel { display: block } expande ou recolhe o conteúdo (como no exemplo de tabela acima) sem JavaScript.
  • Abas e acordeões apenas com CSS. Agrupe botões de rádio por name, depois use input:checked ~ ... para revelar o painel correspondente.
  • Estilizando o estado de <option>. option:checked permite destacar o item atualmente selecionado em um <select>.

Acessibilidade e armadilhas

  • Mantenha o input focável. Use appearance: none, recorte ou opacity: 0 em vez de display: none se ainda quiser que usuários de teclado consigam alcançar e alternar o controle. display: none remove o input da ordem de tabulação completamente.
  • Sempre associe um controle a um <label>. Um <label> corretamente associado (via for/id) torna o texto visível um alvo de clique e de leitores de tela para o controle.
  • O elemento estilizado deve ser um irmão que vem depois do input. Os combinadores de irmãos CSS (+, ~) só olham para frente, portanto coloque o input antes dos elementos que ele controla no HTML.
  • :checked reflete o estado ao vivo, não o atributo HTML. Mesmo um elemento sem o atributo checked corresponde a :checked assim que o usuário o seleciona, e um com o atributo para de corresponder assim que o usuário o desmarca.

Pseudo-classes relacionadas

:checked é frequentemente combinada com outras pseudo-classes de estado e de formulário:

  • :disabled — estiliza controles com os quais o usuário não pode interagir.
  • :required — estiliza campos que precisam ser preenchidos.
  • :focus e :hover — estiliza estados de interação, úteis para controles personalizados.
  • :not() — inverte uma seleção, por exemplo input:not(:checked).

Veja a lista completa de seletores CSS para mais formas de segmentar elementos.

Prática

Prática
Qual é a função da pseudo-classe ':checked' no CSS?
Qual é a função da pseudo-classe ':checked' no CSS?
Was this page helpful?