O :invalidseletor permite selecionar elementos que não contêm conteúdo válido, conforme determinado por seu typeatributo. :invalidé definido nas especificações CSS Selectors Nível 3 como um “pseudo-seletor de validade”, o que significa que é usado para estilizar elementos interativos com base em uma avaliação da entrada do usuário.
Esse seletor tem um uso específico: fornecer feedback a um usuário enquanto ele interage com um formulário na página. O exemplo abaixo usa CSS para transformar os campos "E-mail" em vermelho ou verde, respondendo se o conteúdo corresponde ou não a um padrão de endereço de e-mail válido:
Observe como o primeiro (“Email”) é verde-válido, mesmo quando não há conteúdo no campo. Isso ocorre porque a entrada é opcional, portanto, deixá-la em branco resultaria em um envio de formulário válido. Para corrigir esse comportamento, o segundo possui um atributo “obrigatório”, o que significa que um campo em branco resultaria em um envio de formulário inválido.
Pontos de interesse
:invalidpode ser “encadeado” com outros pseudo-seletores: como:focuspara validar apenas quando o usuário está digitando,:beforeou:afterpara gerar ícones ou texto para fornecer mais feedback do usuário, ou seletores de atributo comoinput(value="")validar apenas campos de entrada contendo conteúdo.
Suporte para navegador
| cromada | Safári | Raposa de fogo | Ópera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 10,0+ | 5.0+ | 4.0+ | 10,0+ | 10+ | não | não |
:invalidfoi introduzido no Módulo 3 dos seletores CSS, o que significa que as versões antigas dos navegadores não o suportam. No entanto, o suporte do navegador moderno está cada vez melhor. Se você precisar de suporte a um navegador mais antigo, use polyfill ou use esses seletores de maneiras não críticas à melhoria progressiva, que é recomendada.