Question
5
Replies
1696
Views
Posted: February 15, 2018
Last activity: March 31, 2018
Closed
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)?
Code:
input.checkbox{
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
background-color: #FFFFFF;
border:1px solid #888;
border-radius:2px;
box-shadow:0 1px 2px rgba(0,0,0,0.05),
inset 0 15px 10px 12px rgba(0,0,0,0.05);
padding:7px;
display:inline-block;
position:relative;
}
input.checkbox:active,
input.checkbox:checked:active{
box-shadow:0 1px 2px rgba(0,0,0,0.05),inset 0 15px 10px 12px rgba(0,0,0,0.05);
}
input.checkbox:checked{
background-color: #367C2B;
border:1px solid #888;
border-radius:2px;
box-shadow:0 1px 2px rgba(0,0,0,0.05),inset 0 15px 10px 12px rgba(255,255,255,0.1);
color:#FFFFFF;
}
input.checkbox:checked:after{
content:'\2714';
font-size:8pt;
position:absolute;
top:0;
left:2px;
background-color:#367C2B;
}
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