Eu fiz o código igual ao do professor e no css também e o botão da minha classe não mudou de cor.
No HTML:
<input type="range" class="form-range input-range" id="nivel-satisfacao">
No CSS:
.input-range::-webkit-slider-thumb, footer {
background-color: var(--marrom-claro);
}
Olá, Camilla!
Pelo código que você compartilhou, parece que você está tentando alterar a cor do botão de um input range usando a classe "input-range". No entanto, observe que você está aplicando a propriedade de cor de fundo para o seletor ".input-range::-webkit-slider-thumb" e também para o seletor "footer".
Para corrigir o problema e garantir que a cor de fundo seja aplicada apenas ao botão do input range, você pode remover o seletor "footer" do seu código CSS. Dessa forma, o código ficaria assim:
.input-range::-webkit-slider-thumb {
background-color: var(--marrom-claro);
}
Certifique-se de que a classe "input-range" está sendo aplicada corretamente ao seu input range no HTML. Além disso, verifique se você definiu a variável "--marrom-claro" com a cor desejada.
Espero que isso resolva o problema e que você consiga alterar a cor do botão do input range. Se você tiver mais alguma dúvida, é só perguntar!
Espero ter ajudado e bons estudos!