Question

5
Replies
1696
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 SR Exists
Moderation Team has archived post