CODEWITHSUNDEEP
htmlcssangular-ui-bootstrap
Urvi_204
Urvi_204

Reputation: 2478

Bootstrap Checkbox Switch Background color issue during disable

These bootstrap checkboxes are without disable:

enter image description here

These bootstrap checkboxes are disabled:

enter image description here

During Disable state it changes background color but I don't want to change background color i want as it is in the disabled state so how can I do this?

I already trying to override default class but nothing change.

This is the default CSS from bootstrap

.switch input:disabled + span {
    background-color:#f1f1f1;
    cursor: not-allowed;
}

I want to remove this background color!!

Upvotes: 2

Views: 5908

Answers (4)

Blake
Blake

Reputation: 192

Updated answer for Bootstrap v4.5.0 in 2020

/* Enabled */
.custom-control-input:checked~.custom-control-label::before
{
  border-color: red !important;
  background-color: blue !important;
}

/* Disabled */
.custom-control-input:checked:disabled~.custom-control-label::before
{
  border-color: yellow !important;
  background-color: green !important;
}

!important is necessary if you want to overwrite all inputs with class custom-control-input. If you just need to overwrite one, try changing the .custom-control-input bit to an ID like #yourinputid

Upvotes: 1

Urvi_204
Urvi_204

Reputation: 2478

Now I Got The Answer:

.switch input:checked:disabled + span {
    background-color:#5d9cec;
    cursor: not-allowed;
}
.switch input:not(:checked):disabled + span {
    background-color:#fff;
    cursor: not-allowed;
}

Ty @Lalit for Helping Me

Upvotes: 3

Lalit Sachdeva
Lalit Sachdeva

Reputation: 6639

Please check the answer, this is I did using bootstrap default classes and css provided in your question and make out the difference what you are doing wrong.

AS IT SEEMS WORKING FOR ME 

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {display:none;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
.switch input:disabled + span {
    background-color:#2196F3;
    cursor: not-allowed;
opacity: 0.6;
}
.switch input:not(:checked):disabled + span {
    background-color:#ccc;
    cursor: not-allowed;
opacity: 0.6;
}
<label class="switch">
  <input type="checkbox" disabled="disabled">
  <span class="slider round"></span>
</label>

<label class="switch">
  <input type="checkbox" checked disabled="disabled">
  <span class="slider round"></span>
</label>

Upvotes: 1

aMJay
aMJay

Reputation: 2243

Please provide us with some of your css code. Regarding your issue, bootstrap css is often selected with high specificity, you might want to make sure specificity of your selectors is higher.

Upvotes: 0

Related Questions