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:

/* Aplicar o vermelho apenas em campos obrigatórios válidos quando não estão focados*/
input[required]:invalid:not(:focus),
textarea[required]:invalid:not(:focus),
select[required]:invalid:not(:focus){
    border-color: red;
}

/* 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 a cor da label para vermelho se o checkbox estiver desmarcado*/
input[type="checkbox"][required]:invalid + label{
    color: #e74c3c;
    font-weight: bold;
}

/* coloca uma borda verde no checkbox quando marcado */
input[type="checkbox"][required]:valid{
    outline: 2px solid #2ecc71;
    outline-offset: 2px;
}

adiciona uma borda azul quando os campos forem focados

/* azul ao focar (sobrepõe vermelho, mas não o verde) */
input:focus,
textarea:focus,
select:focus{
    border-color: #3498db;
    box-shadow: 0 0 0 4px rgba(52,152,219,0.12);
    outline: none;
}
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! Adicionei uma borda azul quando os campos forem focados. Para isso tive de mudar o código em algumas partes.