Question
Custom CSS for Check-boxes doesn't work in IE/Firefox
Hi,
I'm using the below custom css for one of the client requirement but it is working only in chrome browser. Do we need to do any extra settings/code to make it compatible for all browsers(IE/Firefox)?
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.
Hi ,
can you share the screen shots of the styles of the checkbox from the Devtools of both the browsers .
It will help to understand that which style is getting overridden and by which.
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://pdn.pega.com/mixins-override-css/mixins-override-css
- https://pdn.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://forums.asp.net/t/2003958.aspx?CSS+Style+Sheet+not+working+on+Internet+Explorer
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