0

<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="teste">
  <label class="custom-control-label" for="teste">
</div>

1 Resposta 1

4

O switch do bootstrap é feito criando dois elemento dentro da label com a classe "custom-control-label", você pode criar algumas regras de CSS para se aplicar a eles, como por exemplo:

.custom-switch .custom-control-label::after{
    background-color: red;
}

.custom-switch .custom-control-label::before {
    border-color: red;
}

Print de um "switch" com a cor vermelha, resultado do código acima

6
  • Perfeito Sergio Carvalho, muito obrigado, me salvou!
    – user247672
    19/07/2021 às 21:00
  • Só uma dúvida, ele ativo como mudo a cor?
    – user247672
    19/07/2021 às 21:02
  • Ao ser ativo o input recebe uma propriedade "checked". Você pode criar a seguinte regra CSS para aplicar quando ele estiver ativo: .custom-control-input:checked~.custom-control-label::before { color: #fff; border-color: red; background-color :red; } .custom-switch .custom-control-input:checked~.custom-control-label::after { background-color: #c55d5d; }` Aqui o CSS já não é tão básico, mas é o gerado pelo próprio bootstrap, um ótimo material de estudo 19/07/2021 às 21:06
  • Adicionei a propriedade, mas infelimente continuou padrão, teria uma outra solução amigo?
    – user247672
    19/07/2021 às 21:11
  • 1
    Até fiz dessa forma, mas nada está dando certo, mas sua ajuda já foi um pontapé inicial amigo vlw
    – user247672
    19/07/2021 às 21:25

Você deve fazer log-in para responder a esta pergunta.