path: root/files/pt-br/web/css/_colon_checked/index.html

---
title: ':checked'
slug: 'Web/CSS/:checked'
tags:
  - ':checked'
  - CSS
  - CSS Pseudo-classe
  - Layout
  - Referencia
  - Web
translation_of: 'Web/CSS/:checked'
---
<div>{{CSSRef}}</div>

<p>A <a href="/pt-BR/docs/Web/CSS/Pseudo-classes">pseudo-classe </a><strong><code>:checked</code></strong> de um seletor CSS representa um elemento <strong>radio </strong>(<code>&lt;input type="radio"&gt;</code>), <strong>checkbox </strong>(<code>&lt;input type="checkbox"&gt;</code>) ou <strong>option</strong> ({{ HTMLElement("option") }} em um {{ HTMLElement("select") }})  que está marcada ou alternado para um estado ligado. O usuário pode mudar seu estado clicando no elemento, ou selecionando um valor diferente, nesse caso a pseudo-classe <strong>:checked</strong> não se aplica a esse elemento, mas vai para um elemento relevante.</p>

<h2 id="Syntax" name="Syntax">Sintaxe</h2>

<pre class="brush: css">input:checked {
  margin-left: 25px;
  border: 1px solid blue;
}
</pre>

<h3 id="Examples" name="Examples">Sintaxe formal</h3>

<pre class="syntaxbox">elemento:checked { estilos de propriedades }</pre>

<h2 id="Examples" name="Examples">Exemplos</h2>

<h3 id="Example_selectors" name="Example_selectors">Exemplo de seletores</h3>

<pre class="brush: css">/* qualquer elemento "checkable" */
:checked {
  width: 50px;
  height: 50px;
}

/* qualquer elemento radio */
input[type="radio"]:checked {
  margin-left: 25px;
}

/* apenas elementos checkbox */
input[type="checkbox"]:checked {
  display: none;
}

/* apenas elementos option */
option:checked {
  color: red;
}
</pre>

<dl>
 <dt><code>input[type="radio"]:checked</code></dt>
 <dd>Representa todos os botões de rádio na página que estão ativos</dd>
</dl>

<dl>
 <dt><code>input[type="checkbox"]:checked</code></dt>
 <dd>Representa todos os checkboxes na página que estão ativos</dd>
 <dt><code>option:checked</code></dt>
 <dd>Representa todos os selects na página que estão selecionados</dd>
</dl>

<h3 id="Usando_checkboxes_escodindos_para_amarzenar_algum_valor_booleano.">Usando checkboxes escodindos para amarzenar algum valor <span class="st">booleano</span>.</h3>

<p>A pseudo-classe <code>:checked </code>aplicada em checkboxes escondidos, adicionado ao início de sua página pode<br>
 ser aplicada de forma a armazenar algum booleano dinâmico para ser usado por uma regra CSS. O exemplo a seguir mostra como exibir/esconder um elemento expansível com um simples clique em um botão (<a class="internal" href="/@api/deki/files/6246/=expandable-elements.html" title="Expandable elements through the :checked pseudoclass">download esse demo</a>).</p>

<pre class="brush: html">&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
&lt;title&gt;Elementos expansíveis&lt;/title&gt;
&lt;style type="text/css"&gt;
#expand-btn {
    margin: 0 3px;
    display: inline-block;
    font: 12px / 13px "Lucida Grande", sans-serif;
    text-shadow: rgba(255, 255, 255, 0.4) 0 1px;
    padding: 3px 6px;
    border: 1px solid rgba(0, 0, 0, 0.6);
    background-color: #969696;
    cursor: default;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -moz-box-shadow: rgba(255, 255, 255, 0.4) 0 1px, inset 0 20px 20px -10px white;
    -webkit-box-shadow: rgba(255, 255, 255, 0.4) 0 1px, inset 0 20px 20px -10px white;
    box-shadow: rgba(255, 255, 255, 0.4) 0 1px, inset 0 20px 20px -10px white;
}

#isexpanded:checked ~ #expand-btn, #isexpanded:checked ~ * #expand-btn {
    background: #B5B5B5;
    -moz-box-shadow: inset rgba(0, 0, 0, 0.4) 0 -5px 12px, inset rgba(0, 0, 0, 1) 0 1px 3px, rgba(255, 255, 255, 0.4) 0 1px;
    -webkit-box-shadow: inset rgba(0, 0, 0, 0.4) 0 -5px 12px, inset rgba(0, 0, 0, 1) 0 1px 3px, rgba(255, 255, 255, 0.4) 0 1px;
    box-shadow: inset rgba(0, 0, 0, 0.4) 0 -5px 12px, inset rgba(0, 0, 0, 1) 0 1px 3px, rgba(255, 255, 255, 0.4) 0 1px;
}

#isexpanded, .expandable {
    display: none;
}

#isexpanded:checked ~ * tr.expandable {
    display: table-row;
    background: #cccccc;

}

#isexpanded:checked ~ p.expandable, #isexpanded:checked ~ * p.expandable {
    display: block;
    background: #cccccc;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;input type="checkbox" id="isexpanded" /&gt;

&lt;h1&gt;Elementos expansíveis&lt;/h1&gt;
&lt;table&gt;
    &lt;thead&gt;
        &lt;tr&gt;&lt;th&gt;Coluna #1&lt;/th&gt;&lt;th&gt;Coluna #2&lt;/th&gt;&lt;th&gt;Coluna #3&lt;/th&gt;&lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
        &lt;tr class="expandable"&gt;&lt;td&gt;[cell text]&lt;/td&gt;&lt;td&gt;[cell text]&lt;/td&gt;&lt;td&gt;[cell text]&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;[cell text]&lt;/td&gt;&lt;td&gt;[cell text]&lt;/td&gt;&lt;td&gt;[cell text]&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;[cell text]&lt;/td&gt;&lt;td&gt;[cell text]&lt;/td&gt;&lt;td&gt;[cell text]&lt;/td&gt;&lt;/tr&gt;
        &lt;tr class="expandable"&gt;&lt;td&gt;[cell text]&lt;/td&gt;&lt;td&gt;[cell text]&lt;/td&gt;&lt;td&gt;[cell text]&lt;/td&gt;&lt;/tr&gt;
        &lt;tr class="expandable"&gt;&lt;td&gt;[cell text]&lt;/td&gt;&lt;td&gt;[cell text]&lt;/td&gt;&lt;td&gt;[cell text]&lt;/td&gt;&lt;/tr&gt;
    &lt;/tbody&gt;
&lt;/table&gt;

&lt;p&gt;[some sample text]&lt;/p&gt;
&lt;p&gt;&lt;label for="isexpanded" id="expand-btn"&gt;Mostra ou esconder elemntos&lt;/label&gt;&lt;/p&gt;
&lt;p class="expandable"&gt;[outra amostra de texto]&lt;/p&gt;
&lt;p&gt;[alguma amostra de texto]&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>

<p>{{ EmbedLiveSample('Usando_checkboxes_escodindos_para_amarzenar_algum_valor_booleano', '', '', '', 'Web/CSS/:checked') }}</p>

<h3 id="Using_hidden_radioboxes_in_order_to_store_some_CSS_boolean_values" name="Using_hidden_radioboxes_in_order_to_store_some_CSS_boolean_values">Usando radioboxes escondidos para armazenar algum valor CSS booleano</h3>

<p>Você também pode usar a pseudo-classe <code>:checked </code>aplicada a um radioboxe escondido afim de construir, por exemplo, uma <strong>galeria de imagem onde as imagens apenas sejam exibidas no tamanho cheio com o clique do mouse em visualizar. </strong>Veja <a href="/@api/deki/files/6268/=css-checked-gallery.zip">essa demonstração</a> como uma dica.</p>

<div class="note"><strong>Nota: </strong>Para um efeito análogo, mas baseada na pseudo-classe <a class="internal" href="/pt-BR/docs/Web/CSS/%3Ahover" title="CSS/:hover"><code>:hover</code></a><code> </code>sem radioboxes escondidos, veja <a href="/@api/deki/files/6247/=css-gallery.zip">essa demostração</a>, tomadas a partir de uma página <a class="internal" href="/pt-BR/docs/Web/CSS/%3Ahover" title="CSS/:hover"><code>:hover</code></a><code>.</code></div>

<h2 id="Specifications" name="Specifications">Especificações</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificação</th>
   <th scope="col">Estatus</th>
   <th scope="col">Comentários</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('HTML WHATWG', '#selector-checked', ':checked') }}</td>
   <td>{{ Spec2('HTML WHATWG') }}</td>
   <td>Sem mudanças.</td>
  </tr>
  <tr>
   <td>{{ SpecName('HTML5 W3C', '#selector-checked', ':checked') }}</td>
   <td>{{ Spec2('HTML5 W3C') }}</td>
   <td>Define a semântica sobre o HTML.</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS4 Selectors', '#checked', ':checked') }}</td>
   <td>{{ Spec2('CSS4 Selectors') }}</td>
   <td>Sem mudanças.</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS3 Basic UI', '#pseudo-checked', ':checked') }}</td>
   <td>{{ Spec2('CSS3 Basic UI') }}</td>
   <td>Link para Seletores nível 3</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS3 Selectors', '#checked', ':checked') }}</td>
   <td>{{ Spec2('CSS3 Selectors') }}</td>
   <td>Define a pseudo-classe, mas não <span class="short_text" id="result_box" lang="pt"><span class="hps">associação</span> <span class="hps">semântica</span></span></td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade de navegadores</h2>

<p>{{ CompatibilityTable() }}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Suporte básico</td>
   <td>1.0</td>
   <td>{{ CompatGeckoDesktop(1.0) }}</td>
   <td>9.0</td>
   <td>9.0</td>
   <td>3.1</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Suporte básico</td>
   <td>2.1</td>
   <td>{{ CompatGeckoMobile(1.0) }}</td>
   <td>9.0</td>
   <td>9.5</td>
   <td>3.1</td>
  </tr>
 </tbody>
</table>
</div>