Toggle button design different at runtime

[Aeneas McBurney]

I have created a toggle button css as below

.onoffswitch .ui-slider-switch {height:25px; width:80px !important;background-color: #aaaaad !important;border-color: #aaaaad }
.onoffswitch .ui-slider-label { font-size:12px; }
.onoffswitch .ui-btn-f {height:21px !important;background-color: #353537 !important; border-color:#353537 !important;}

It works at design time but reverts back runtime. See screenshots below..

design...

runtime...

[Illya Stepanov]

Hi Aeneas -

Inspect your CSS styles in browser developer tools, it looks like there are some collisions in styles inheritances.

[Aeneas McBurney]

Shouldn't this show the same at design time? The display should be consistent and I'm not sure what to check to get it corrected.