: usuário-inválido - CSS-Tricks

Anonim

O :user-invalidé uma pseudoclasse CSS que está sob proposta no rascunho de trabalho dos seletores CSS de nível 4 que seleciona um elemento de formulário com base em se o valor - conforme inserido por um usuário - é válido quando verificado em relação ao que é especificado como um valor aceito em a marcação HTML após o usuário final interagir com o formulário além dessa entrada. Na verdade, :user-invalidtem sido chamada de “A Pseudoclasse de Interação do Usuário” porque é única na identificação de uma ação do usuário na seleção de um elemento.

Considere a seguinte marcação HTML para um formulário básico com um campo numérico:

Quantidade:

O intervalo numérico definido pela marcação HTML para a entrada está entre 1e, 10mas o valor padrão foi definido como 11. Isso significa que o valor é inválido assim que o formulário é carregado.

No entanto, a :user-invalidpseudoclasse não terá efeito até que o usuário tenha realmente interagido com o formulário, além de inseri-lo no campo. Essa interação é a diferença entre :user-invalide :invalid. O mesmo princípio se aplica aos valores de formulário inseridos que são definidos por :in-range, :out-of-rangee :required.

Uma vez que o valor que o usuário inseriu é determinado como uma entrada inválida, podemos selecionar o elemento:

input:user-invalid ( color: red; )

A imagem a seguir ilustra os diferentes estados entre :valide com :user-invalidbase no exemplo HTML acima.

A diferença entre um valor válido (à esquerda) e um valor inválido inserido por um usuário após interagir com o formulário.

O que é confuso aqui é o quão intimamente relacionados :invalide :user-invalidestão. Se usados ​​juntos, pode ser difícil distinguir os dois:

input:invalid ( color: red; ) input:user-invalid ( color: red; )
A diferença entre :invalid(centro) e um valor inválido inserido por um usuário (direita) pode ser difícil de distinguir

Usar um sobre o outro ou ter um estilo distinto entre os dois pode ser uma experiência de usuário melhor em um caso de uso da vida real.

Suporte para navegador

:user-invalid não é suportado atualmente, mas é proposto no rascunho de trabalho dos seletores CSS de nível 4.

O Firefox usa uma propriedade não padrão prefixada -moz-ui-invalidque adota padrões semelhantes.

Relacionado

  • :invalid
  • :valid

Mais Informações

  • Especificação de seletores CSS de nível 4
  • Especificação MDN para :-moz-ui-invalid