:checked :disabled e Pseudo-classes de Estado de Formulários
Estilize elementos de formulário com base em seus estados interativos, como marcado, desabilitado e obrigatório.
:checked :disabled e Pseudo-classes de Estado de Formulários é uma aula grátis de CSS Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de CSS Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de CSS Academy inclui 4 aulas no total.
Visão geral das pseudoclasses de estado de formulários
O CSS fornece pseudoclasses que refletem os estados dos elementos de formulário HTML. Elas permitem estilizar controles de formulário apenas com CSS, sem JavaScript.
:checked
:checked aplica-se a caixas de seleção e botões de opção quando estão selecionados, e a elementos <option> dentro de listas de seleção quando escolhidos.
<input type="checkbox" id="c1" checked /><label for="c1">Checked (bold blue)</label><br/><input type="checkbox" id="c2" /><label for="c2">Unchecked</label>
:checked para caixas de seleção personalizadas
O truque do :checked: oculte o campo de entrada nativo e estilize uma caixa personalizada usando o seletor de irmão adjacente acionado por :checked:
<label><input type="checkbox" checked /><span class="checkbox-box"></span> Custom checkbox (checked)</label>
:disabled e :enabled
:disabled seleciona elementos de formulário com o atributo disabled. :enabled seleciona elementos com os quais é possível interagir.
<input type="text" value="Disabled input" disabled />
<button>Enabled button</button>
:required e :optional
:required seleciona campos de entrada com o atributo required. :optional seleciona campos de entrada sem esse atributo.
<input type="text" placeholder="Required field" required />
<input type="text" placeholder="Optional field" />
:valid e :invalid
:valid e :invalid refletem o estado de validação nativa do formulário pelo navegador, com base no tipo, no padrão, nos valores mínimo e máximo e nas restrições de obrigatoriedade.
<input type="email" value="not-an-email" />
<input type="email" value="valid@example.com" />
:user-valid e :user-invalid
A validação do navegador é executada imediatamente ao carregar a página, mesmo antes da interação do usuário. :user-valid e :user-invalid só se aplicam depois que o usuário interage com o campo — proporcionando uma experiência muito melhor.
<input type="email" value="not-an-email" required />
:placeholder-shown
:placeholder-shown aplica-se quando um campo de entrada exibe seu texto de espaço reservado — o que significa que o campo está vazio. Use-o para detectar campos vazios sem JavaScript.
<input type="text" placeholder="Type your name" />
<span class="input-label">Floats when empty</span>
:read-only e :read-write
:read-only seleciona campos de entrada com o atributo readonly. :read-write seleciona campos de entrada editáveis.
<input type="text" value="Read-only field" readonly />
:indeterminate
:indeterminate aplica-se a caixas de seleção em um estado intermediário (nem selecionadas nem desmarcadas — definido via JavaScript) e a botões de opção quando nenhuma opção do grupo foi selecionada.
<input type="checkbox" id="ind1" />
<script>document.getElementById('ind1').indeterminate = true;</script>
:in-range e :out-of-range
Para campos de entrada type="number" ou type="range" com valores mínimo e máximo, :in-range e :out-of-range refletem a validade do valor atual em relação a esses limites.
<input type="number" min="1" max="10" value="15" />
Verificação rápida
Qual pseudoclasse aplica estilos de validação do formulário somente depois que o usuário interage com um campo de entrada?
Recapitulação
As pseudoclasses de estado de formulários do CSS refletem a validação nativa e o estado de interação dos formulários sem JavaScript: :checked, :disabled, :required, :valid, :invalid e outras. Prefira :user-invalid a :invalid para proporcionar uma experiência melhor. Use :placeholder-shown para detectar campos vazios.
Perguntas Frequentes
A aula “:checked :disabled e Pseudo-classes de Estado de Formulários” é grátis?
Sim — o texto completo de “:checked :disabled e Pseudo-classes de Estado de Formulários” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de CSS Academy, atualize para CoddyKit PRO. O curso de CSS Academy inclui 4 aulas no total.
O que vou aprender em “:checked :disabled e Pseudo-classes de Estado de Formulários”?
Estilize elementos de formulário com base em seus estados interativos, como marcado, desabilitado e obrigatório. Você pratica CSS Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar CSS Academy?
Nenhuma experiência prévia é necessária. CSS Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.
Quanto tempo leva a aula “:checked :disabled e Pseudo-classes de Estado de Formulários”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de CSS Academy?
Sim. Cada aula de CSS Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- :hover :focus :active e :visited
- :nth-child e :nth-of-type
- :not() :is() e :where()
- :checked :disabled e Pseudo-classes de Estado de Formulários