CSS :required Pseudo Classe - Learn CSS

A pseudo-classe CSS :required corresponde a qualquer controle de formulário cujo atributo required esteja definido. Use-a para marcar visualmente os campos que o utilizador deve preencher antes de enviar o formulário — um pequeno asterisco, uma borda colorida ou uma mensagem de dica — para que as pessoas não cheguem ao botão de envio apenas para serem rejeitadas por um erro de validação.

Esta página explica o que :required corresponde, como difere de :optional e das pseudo-classes de validade, a ressalva de acessibilidade que deve conhecer, e um exemplo funcional que pode executar.

Quais elementos `:required` corresponde?

:required corresponde apenas a elementos que realmente suportam o atributo required e que o tenham definido:

<input> (de um tipo que pode ser obrigatório — text, email, password, tel, url, number, date, checkbox, radio, file, etc.)
<select>
<textarea>

Não corresponde a <button>, <input type="submit">, <input type="hidden">, nem a qualquer elemento onde required não tenha significado. A correspondência é dinâmica: se adicionar ou remover o atributo required com JavaScript, o estilo é atualizado imediatamente.

`:required` vs. pseudo-classes relacionadas

:required descreve o estado da restrição, não se o utilizador a satisfez. Combine-a com as vizinhas certas:

Pseudo-classe	Corresponde quando…
`:required`	o campo tem o atributo `required`
`:optional`	o campo não tem `required`
`:valid`	o valor atual do campo passa nas suas restrições
`:invalid`	o valor atual do campo falha nas suas restrições

Cada controle de formulário é :required ou :optional, pelo que pode dividir o estilo de forma clara entre os dois. Os estados de validade (:valid / :invalid) reagem à medida que o utilizador escreve.

Sintaxe

:required {
  /* CSS declarations */
}

Normalmente restringe-se a um tipo de controle para que a regra não afete elementos não relacionados:

input:required,
select:required,
textarea:required {
  border-left: 3px solid #1c87c9;
}

Nota de acessibilidade

O estilo sozinho (cor, uma borda mais espessa) não é suficiente — utilizadores daltónicos e de leitores de ecrã podem não o perceber. Mantenha o atributo nativo required no controle (ele expõe o requisito à tecnologia assistiva e aciona a validação do navegador) e reforce-o com uma indicação de texto visível, como um asterisco. :required é para o acabamento visual, não para a informação.

Exemplo

O exemplo abaixo marca os campos obrigatórios com uma borda inferior azul e deixa os opcionais em cinzento usando :optional:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        margin: 40px auto;
        max-width: 400px;
      }
      label,
      button {
        display: block;
        width: 100%;
        margin-bottom: 1.5em;
      }
      input,
      button {
        padding: .4em 1em;
      }
      input {
        border: 1px solid #666666;
      }
      input:optional {
        background-color: #eeeeee;
        color: #666666;
      }
      input:required {
        border-bottom: 3px solid #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>:required selector example</h2>
    <div class="example">
      <form action="#">
        <label>
          <input type="text" required />Name *
        </label>
        <label>
          <input type="email" required />Email *
        </label>
        <label>
          <input type="tel" />Phone (optional)
        </label>
        <label>
          <input type="url" />Address (optional)
        </label>
      </form>
    </div>
  </body>
</html>

Experimente Você Mesmo »

Os campos obrigatórios Name e Email recebem o sublinhado azul; os campos opcionais Phone e Address recebem o fundo cinzento — controlado inteiramente pelas regras :required e :optional.

Suporte de navegadores e especificação

:required é suportado em todos os navegadores modernos há anos, pelo que pode utilizá-lo sem alternativa. Está definido em duas especificações:

Tópicos relacionados

:optional — o inverso: estiliza controles sem required.
:valid e :invalid — reagem a se o valor inserido passa nas suas restrições.
:focus — combine com :required para realçar o campo obrigatório ativo.
:disabled e :checked — outras pseudo-classes de estado de formulário.
HTML Forms — onde o atributo required é definido.

Prática

Qual é a função da pseudo-classe ':required' no CSS?

Seleciona todos os elementos `<input>` com o atributo 'required'Seleciona todos os elementos `<input>` sem o atributo 'required'Incorpora imagens no arquivo CSSÉ usada para selecionar os itens que têm o atributo required no formulárioAjusta o tamanho de imagens no CSS

Quais elementos :required corresponde?

:required vs. pseudo-classes relacionadas