As per my understanding of above code, you want to the ave different appearance of checkbox.

You can customise the colour, background and appearance of checkboxes using OOTB skin rule. Have you explored Presentation tab of checkbox control? 

Also refer these links:-

Alter mixins:-https://docs-previous.pega.com/mixins-override-css

- https://docs-previous.pega.com/how-customize-skins-and-styles

Coming to your issue,

There could be a generic issue of CSS with IE, 

- https://stackoverflow.com/questions/595768/css-not-working-in-ie

- https://www.sitepoint.com/community/t/css-not-working-at-all-in-ie11/38927

- https://social.msdn.microsoft.com/Forums/en-US/d5c48bfc-e90c-46c0-8d64-5c0bb1990134/css-style-sheet-not-working-on-internet-explorer?forum=asphtmlcssjavascript

Scrutinize your code on pointers mentioned in the links.

Hope it helps you in sorting the issue faced at your end, kindly notify by marking this posts as answered or helpful.

Regards,

Asif

Hi ,

As mentioned in your code :

appearance:none;

-moz-appearance:none;

-webkit-appearance:none

Check in the DOM if your styles are getting overridden by the other styles. If it  is then apply !important so that it can pick you styles .

Please see the attached sccreenshot which shows that what  styles are getting picked and if it is getting overriddden by some other styles.

Apologies, none of above worked.

Can someone help me with this?