Black November

ATÉ 50% OFF

TÁ ACABANDO!

0 dias

0 horas

0 min

0 seg

Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

[Sugestão] Validando apenas inputs e caheckbox requeridos

Para destacar apenas os inputs que são obrigatórios:

/* mudar para aplicar o vermelho apenas em campos obrigatórios válidos */
input[required]:invalid,
textarea[required]:invalid,
select[required]:invalid{
    border-color: red;
}

/* mudar para aplicar o verde apenas em campos obrigatórios válidos */
input[required]:valid,
textarea[required]:valid,
select[required]:valid{
    border-color: #2ecc71;
}

Para destacar o checkbox de consentimento com a pesquisa:

/* Muda cor do checkbox quando marcado/válido para verde */
input[type="checkbox"][required]:valid{
    outline: 2px solid #2ecc71;
    outline-offset: 2px;
}

/* mudar cor da label para vermelho quando checkbox estiver desmarcado */
input[type="checkbox"][required]:invalid + label{
    color: #e74c3c;
    font-weight: bold;
}

Matricule-se agora e aproveite até 50% OFF

O maior desconto do ano para você evoluir com a maior escola de tecnologia

QUERO APROVEITAR
2 respostas

Oi, Luis Carlos! Como vai?

Agradeço por compartilhar seu código com a comunidade Alura.

Gostei de como você organizou as regras para diferenciar campos valid e invalid, deixando claro o comportamento de cada tipo de input. Isso ajuda bastante na leitura e manutencao do formulario.

Uma dica interessante para o futuro e usar a pseudo-classe focus-within para destacar um grupo de campos quando qualquer elemento interno receber foco. Veja este exemplo:


form:focus-within{
    border: 2px solid #3498db;
}

Esse código aplica uma borda no formulário quando qualquer campo estiver em foco.

Alura Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!
solução!

thanks