How do I change the color of the bootstrap switch?

Asked

Viewed 26 times

-1

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

html css

1 answer

3


The bootstrap switch is made by creating two elements inside the label with the "custom-control-label" class, you can create some CSS rules to apply to them, for example:

.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

  • Perfect Sergio Carvalho, thank you very much, saved me!

  • Just a doubt, it activates as I change the color?

  • When active the input is given a "checked" property. You can create the following CSS rule to apply when it is active: . 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; }` Here the CSS is no longer so basic, but is the one generated by the bootstrap itself, a great study material

  • I added the property, but unfortunately remained standard, would have another solution friend?

  • Not ready, I recommend you use the function of inspecting element and see how the bootstrap css is applied, and go changing until you find the daily result. So you’ll know which class to change

  • 1

    I did it that way, but nothing is working, but your help was already a kick start friend vlw

Show 1 more comment

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.