Question

5
Replies
1882
Views
Close popover
Mohan Pawar (MohanP16)
Deere & Company

Deere & Company
IN
MohanP16 Member since 2018 4 posts
Deere & Company
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;
}
User Experience Support Case Exists
Moderation Team has archived post,
Close popover This thread is closed to future replies. Content and links will no longer be updated. If you have the same/similar Question, please write a new Question.