Change the color of the label

[rajavijayavendan]

I have to change the background-colour of the empty label to green on ON State and to red colour on OFF State.How can I accomplish that?

[JulioWar]

Hi @rajavijayavendan you can use css. When the switch change the state. I am putting a specific class for each state, by default are .bootstrap-switch-off and .bootstrap-switch-on.

So you can do something like this:

.bootstrap-switch-off {
    background: red;
}
.bootstrap-switch-off .bootstrap-switch-label {
    background: red;
}

[JulioWar]

Hello @rajavijayavendan Please let me know if you resolved it.

[rajavijayavendan]

Hi, Thanks for your callback..But sorry,your comment didn't work for me.I chose not to change the colour

Thanks Rajavijayavendan M

On 17-Jul-2017 5:38 AM, "Julio Guerra" notifications@github.com wrote:

Hello @rajavijayavendan https://github.com/rajavijayavendan Please let me know if you resolved it.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/JulioWar/jw-bootstrap-switch-ng2/issues/9#issuecomment-315647979, or mute the thread https://github.com/notifications/unsubscribe-auth/AXKU5MuUwJoieZDP7K0BPcmc_GF3BHbKks5sOqXxgaJpZM4OSazZ .

[JulioWar]

If I understand you correctly, you are trying to change the label between ON and OFF label , right?. as this example:

so the solution works for that case

or if you are trying to change the background of label that contain the OFF and ON text, you just need to use the switch-on-color and switch-off-color property.

check the repository for the demo of this component here

[rajavijayavendan]

Thanks

On Mon, Jul 17, 2017 at 4:27 PM, Julio Guerra notifications@github.com wrote:

If I understand you correctly, you are trying to change the label between ON and OFF label , right?. as this example:

[image: on] https://user-images.githubusercontent.com/6256473/28265021-f30171dc-6aaa-11e7-86d9-2afa0c97252e.PNG [image: off] https://user-images.githubusercontent.com/6256473/28265036-01241fa8-6aab-11e7-9d11-0998a01e28f8.PNG so the solution works for that case

or if you are trying to change the background of label that contain the OFF and ON text, you just need to use the switch-on-color and switch-off-color.

check the repository for the demo here https://github.com/JulioWar/jw-bootstrap-switch-demo

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/JulioWar/jw-bootstrap-switch-ng2/issues/9#issuecomment-315724438, or mute the thread https://github.com/notifications/unsubscribe-auth/AXKU5O7nmTKFGZ_oRWpudrM2m18MbYrRks5sOz4jgaJpZM4OSazZ .

[JulioWar]

your welcome @rajavijayavendan, close the issue if you resolve it. Thanks for using my component.

[ddavidtran]

Hi Julio, This solution does not work. I have this on a component and tried to change color with the component css. It does not work. If I inspect the element and change it myself directly on the browser, it works.

[JulioWar]

Hi @ddavidtran

Can you share your implementation code, Maybe I can help.

[ddavidtran]

Hi @ddavidtran

Can you share your implementation code, @JulioWar

app.module.ts import { JwBootstrapSwitchNg2Module } from 'jw-bootstrap-switch-ng2'; @NgModule({ import: [JwBootstrapSwitchNg2Module] })

header.component.html <bSwitch switch-size="small" switch-on-text="Editor" switch-off-text="Report" [(ngModel)]="state" (changeState)="navigateTo($event)"></bSwitch>

header.component.css .switch-on-color { background: darkorange; }

I have also tried bootstrap-switch-handle-off bootstrap-switch-default` and your code snippet in previous answers.