Pseudo-classe :invalid CSS

Definição e uso

CSS :invalid O pseudo-classe é usado para definir o estilo dos elementos de formulário inválidos.

Atenção:Este pseudo-classe se aplica apenas a elementos de formulário com restrições, como elementos de entrada com atributos min e max, campos de e-mail sem e-mail válido ou campos de número sem valor numérico, etc.

Atenção:Se qualquer botão de rádio em um grupo de botões de rádio for obrigatório, este pseudo-classe será aplicado a todos os botões de rádio se nenhum botão de rádio no grupo for selecionado.

Dica:Usar :valid O pseudo-classe define o estilo dos elementos de formulário válidos.

Exemplo

Defina o estilo dos elementos <fieldset> e <input> inválidos:

fieldset:invalid {
  border: 2px sólido vermelho;
  background-color: bege;
}
input:invalid {
  border: 2px sólido vermelho;
  background-color: bege;
}

Experimente você mesmo

Sintaxe CSS

:invalid {
  declarações css;
}

Detalhes técnicos

Suporte do navegador

Os números na tabela indicam a primeira versão do navegador que suporta completamente esse pseudo-classe.

Páginas relacionadas

Referência:Seletor CSS :valid