Question

5
Replies
1480
Views
MohanP16 Member since 2018 4 posts
Deere & Company
Posted: 2 years ago
Last activity: 2 years 6 months ago
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 Interface SR Exists
Moderation Team has archived post
Share this page LinkedIn