Question
Greenfield AG
DE
Last activity: 30 Sep 2019 14:43 EDT
Custom CSS Overriden in IE
We have a requirement to configure all checkboxes of an application in black color. We have customized the CSS and saved the sheet to included styles within the Skin. The change can be identified in Chrome and Firefox, however it gets ignored/overriden in IE. The customer has IE as standard browser. How could we force the change?
Until now I have tried the following:
/* custom checkbox style */
input[type="checkbox"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
background-image: url('webwb/checkbox_unchecked.png') !important;
background-size: 26px !important;
background-repeat: no-repeat !important;
background-position: 99% 50% !important;
width: 26px !important;
height: 26px !important;
}
input[type="checkbox"]:checked {
background-image: url('webwb/checkbox_checked.png') !important;
}
input[type="checkbox"]:disabled {
opacity: 0.5;
}
The selected image holds the color we wish.
***Moderator Edit-Vidyaranjan: Updated Platform Capability***
***Edited by Moderator Marissa to update SR Details***
Accepted Solution
Pegasystems Inc.
IN
Hi,
Can you try using ::-ms-check for setting background image in IE .
https://developer.mozilla.org/en-US/docs/Web/CSS/::-ms-check
Pegasystems Inc.
IN
Hi,
You can check out this product support video to help you with debugging: https://community.pega.com/video-library/how-troubleshoot-when-application-skin-not-picked
Thanks
Pegasystems Inc.
IN
In IE browser, Pega adds a class "ie" to the html. Using this "ie" class, we can write css specific to IE browser. Also please check for the compatibility of the css properties with the browser version. Because most CSS3 properties are not supported in IE9 or less.
Greenfield Technology AG
DE
Thank you very much for the support. We could solve the issue using ::-ms-check.
Pegasystems Inc.
IN
Thank you for updating the solution. I have marked the 1st reply on this post as the Correct Answer.