Alterando cor radio button disabled | HTML e CSS: praticando HTML/CSS

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!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!