Entrar Ainda não tem acesso?
1
resposta

Não estou conseguindo alterar cor do Botão range

Referente ao curso Bootstrap 5: novos recursos e práticas recomendadas de HTML, CSS e JavaScript, no capítulo Formulário com Bootstrap e atividade Faça como eu fiz: formulário responsivo - Estilizando input range

por Nathan Ryun Meen Wu
| 30.8k xp | 17 posts

Tudo bem com vocês? não estou conseguindo alterar a cor do botão range.

acho que fiz do mesmo jeito que o prof fez, mas não está dando certo.

.input-range::-webkit-slider-thumb{
  background-color: var(--marrom-claro);
}

<label for="customRange1" class="form-label">Nível de Satisfação</label>
          <input type="range" class="form-range input-range" id="nivel-satisfacao">
          <div class="form-check">
            <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
            <label class="form-check-label" for="flexCheckDefault">
              Deseja receber novidades por email?
            </label>
1 resposta
por SARAH CRISTINA BATISTA DOS SANTOS
| 887.8k xp | 2113 posts
Alura Scuba Team Monitor/ fórum

Olá, Nathan! Tudo bem?

Pelo que você compartilhou, parece que você está no caminho certo para alterar a cor do botão range. No entanto, um detalhe importante é garantir que a variável --marrom-claro esteja definida corretamente em seu CSS.

A variável --marrom-claro deve ter o valor #B29463 como mencionado no texto da aula. Você pode definir essa variável no início do seu arquivo CSS da seguinte maneira:

:root {
  --marrom-claro: #B29463;
}

Depois disso, o seu código para alterar a cor do botão range deve funcionar corretamente:

.input-range::-webkit-slider-thumb{
  background-color: var(--marrom-claro);
}

Além disso, certifique-se de que o arquivo CSS onde você definiu a cor do botão range esteja corretamente vinculado ao seu arquivo HTML. Isso pode ser feito adicionando a seguinte linha no cabeçalho (<head>) do seu arquivo HTML:

<link rel="stylesheet" type="text/css" href="caminho_do_seu_arquivo.css">

Substitua "caminho_do_seu_arquivo.css" pelo caminho real do seu arquivo CSS.

Espero ter ajudado e bons estudos!