0

I want to change color of my toggle button when it get disabled. I Implemented this toggle using :before fetaure of css . Code is present at https://jsfiddle.net/sachin8085/adm5t7rz/6/

<div>
Step 1> click on toggle button <br />

step 2> click on disable button <br />

result > Blue color of switch should change to gray when it get disabled.

</div>
<div>



<label class="toggleswitch" style="hidden: true" id="lblToggle">
  <input id="enableSN" name="enableSN" class="switch-input" type="checkbox" [(ngModel)]="appEnabled" (ngModelChange)="switchChange($event)">

  <div class="slider"></div>
</label>

<div>
  <button class="btn btn-primary" id="btnDisabled" text="disable" onclick="ondisabledclick()"> disable</button>
</div>
<div id="demo">
  Sample
</div>

</div>

CSS

/* The switch - the box around the slider */

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


/* Hide default HTML checkbox */

.toggleswitch input {
  display: none;
}

Not able to find a way to set a background color property of :before element when its parent get disabled.

Sachin
  • 4,621
  • 6
  • 25
  • 31

1 Answers1

2

I dont know if it is what you looking for

.disabled .slider:before{
  background-color: red;
}
.disabled input:checked + .slider:before{
  background-color: green;
}

example: jsfiddle

And also if I'm correct you shouldn't use block elements (div) inside label, its wrong behaviour

https://stackoverflow.com/a/18609649/1121576

Community
  • 1
  • 1
Szymon
  • 1,281
  • 1
  • 20
  • 36
  • yeah but you wanted to change color when the slider is disabled, so I don't get it? what you want to achive...Quote "I want to change color of my toggle button when it get disabled. " I did what you wanted. – Szymon Sep 01 '16 at 22:20
  • oh okay sorry, but still code with checked is working like you can see on jsfiddle just check slider and click disabled then you'll get green color. – Szymon Sep 01 '16 at 22:24
  • Hmm it works as it supposed to work, .disabled class is given on parent element of input and slider so when label hasClass("disabled") then input:checked + (sibling) .slider have desired attributes. – Szymon Sep 01 '16 at 22:35
  • I'm an idiot... Not sure where my brain is today. Sorry for wasting your time, haha. – Hunter Turner Sep 01 '16 at 22:37