O :requiredseletor de pseudo classe em CSS permite que os autores selecionem e estilizem qualquer elemento correspondente com o requiredatributo. Os formulários podem indicar facilmente quais campos devem ter dados válidos antes que o formulário possa ser enviado, mas permite que o usuário evite a espera incorrida por ter o servidor como o único validador da entrada do usuário.
Digamos que temos uma entrada com um atributo de type="name"e torná-la uma entrada obrigatória usando o requiredatributo booleano 1 :
Agora podemos definir o estilo dessa entrada usando o :requiredseletor de pseudo classe:
/* style all elements with a required attribute */ :required ( background: red; )Também podemos definir o estilo de campos de formulário obrigatórios usando seletores simples, bem como encadeando seletores de pseudo classes adicionais:
/* style all input elements with a required attribute */ input:required ( box-shadow: 4px 4px 20px rgba(200, 0, 0, 0.85); ) /** * style input elements that have a required * attribute and a focus state */ input:required:focus ( border: 1px solid red; outline: none; ) /** * style input elements that have a required * attribute and a hover state */ input:required:hover ( opacity: 1; )Demo
Veja a Caneta: estilo exigido por Chris Coyier (@chriscoyier) no CodePen.
Pontos de interesse
O requiredatributo é tratado como um booleano, o que significa que não requer um valor. Basta ter requiredum elemento para que o navegador saiba que esse atributo existe e que a entrada correspondente é de fato um campo obrigatório. Embora, de acordo com a especificação W3C, o atributo required também funcione com um valor vazio ou um valor com o nome do atributo.
O atributo required também solicita que o navegador use textos explicativos nativos, como a mensagem de bolha representada na demonstração.
Para aquelas entradas não estilizadas usando :required, os autores também podem personalizar elementos não obrigatórios usando o :optionalseletor de pseudo classe junto com :invalide :validque são acionados quando os requisitos de dados de um campo de formulário são atendidos.
A validação do formulário também pode ser complementada juntamente requiredcom o patternatributo para ajudar a filtrar os dados dependendo do typeatributo da entrada . Os padrões podem ser escritos como uma expressão regular ou uma string. No exemplo abaixo, estamos usando uma expressão regular para corresponder à sintaxe de um endereço de e-mail.
O :requiredatributo funciona em botões de opção. Se você colocar obrigatório em um botão de opção (ou todos), esse grupo específico de botões de opção será necessário. Nas caixas de seleção, torna cada caixa de seleção individual obrigatória (a ser marcada).
Suporte para navegador
Os dados de suporte deste navegador são do Caniuse, que tem mais detalhes. Um número indica que o navegador oferece suporte ao recurso nessa versão e superior.
Área de Trabalho
| cromada | Raposa de fogo | IE | Beira | Safári |
|---|---|---|---|---|
| 10 | 4 | 10 | 12 | 10,1 |
Celular / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.4.3-4.4.4 | 10,3 |
1 Atributos booleanos : vários atributos em HTML5 são atributos booleanos. A presença de um atributo booleano em um elemento representa o valor verdadeiro e a ausência do atributo representa o valor falso. Se o atributo estiver presente, seu valor deve ser a string vazia ou um valor que não faz distinção entre maiúsculas e minúsculas para o nome canônico do atributo, sem nenhum espaço em branco à esquerda ou à direita.