Question

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;

}

**Moderation Team has archived post**

This post has been archived for educational purposes. Contents and links will no longer be updated. If you have the same/similar question, please write a new post.

Group Tags

Comments

Keep up to date on this post and subscribe to comments

Pega
February 15, 2018 - 5:42am

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

 

Pega
February 16, 2018 - 2:54am

Hi ,

As mentioned in your code :

appearance:none;

-moz-appearance:none;

-webkit-appearance:none

 

Check in the DOM if your styles are getting overridden by the other styles. If it  is then apply !important so that it can pick you styles .

Please see the attached sccreenshot which shows that what  styles are getting picked and if it is getting overriddden by some other styles.

 

February 23, 2018 - 4:34am

Apologies, none of above worked.

March 14, 2018 - 8:59am

Can someone help me with this?

Pega
March 31, 2018 - 2:52pm
Response to MohanP16

Hi ,

can you share the screen shots of the styles of the checkbox from the Devtools of both the browsers .

It will help to understand that which style is getting overridden and by which.