Solucionado
Bom dia pessoal
Como faço pra alterar a cor do radio button utilizando o accent-color (que é o componente que altera a cor) sobrescrevendo o user agent style que acaba deixando o componente numa cor mais clara, que é a alteração que eu desejo fazer, deixando numa cor mais escura?
Obrigado
Att. Marcos Vizine
hoje, com a Alura e o Google Gemini
Oi, Marcos, tudo bem?
Primeiramente, é importante notar que o accent-color é uma propriedade relativamente nova que permite alterar a cor de certos elementos de formulário de forma fácil. No entanto, quando o elemento está desabilitado, o navegador geralmente aplica uma opacidade ao estilo para indicar que o elemento não está interativo, o que pode dificultar a aplicação de cores mais escuras.
Uma maneira de contornar isso é usar um pouco de CSS para ajustar a opacidade ou a cor do elemento quando ele está desabilitado. Aqui está um exemplo de como você pode fazer isso:
<input type="radio" id="rodrigo" disabled>
<label for="rodrigo">Rodrigo</label>
input[type="radio"]{
filter: brightness(70%);
accent-color: darkblue;
}
Neste exemplo, o filtro brightness(70%) é usado para escurecer o botão radio desabilitado. Você pode ajustar o valor de brightness() para conseguir o efeito desejado. Além disso, o accent-color é definido como darkblue, mas você pode substituir isso pela cor que preferir.
Lembre-se de que o suporte ao accent-color e como ele interage com estados desabilitados pode variar entre diferentes navegadores, então é sempre uma boa ideia testar em múltiplos ambientes para garantir uma aparência consistente.
Todavia, vale ressaltar que como não tenho acesso ao cenário completo do projeto, outros testes terão de ser feitos a fim de obter o resultado esperado, mas espero que esta resposta seja um bom ponto de partida para a resolução do seu problema.
Espero ter ajudado. Abraços!
Obrigado Rodrigo