You are viewing limited content. For full access, please sign in.

Question

Question

Forms CSS override built in !important tag

asked on January 8, 2021

I often use !important to override a built-in CSS configuration. I am running into an issue where a built in css configuration includes it's own !important tag.

 

.cf-formwrap textarea[backend-readonly], .disabledTextArea {
    background-color: #eee !important;
    border: 1px solid #e5e5e5;
}

Since it already includes !important in the built in class, how do I add a class that overrides it?

I need something more important than important. It sure would be helpful to use numbers for priority instead of just either not important or important. For example if this was at a 10, I could make mine at an 11 if I needed to override.

0 0

Answer

SELECTED ANSWER
replied on January 8, 2021

There's no reason you can't combine their class with your class. Technically everything is a "custom" class since there's no predefined ones in CSS, so in this context, when I say "custom class" I mean not one's built into Forms.

If theirs is .cf-formwrap, then add .cf-formwrap to yours too.

Like I said, if I want to override

.cf-formwrap input {___ !important}

I just need to be more specific, and its easier to narrow down what you need to do to raise the specificity if you use similar selectors like

.cf-formwrap .myClass input {____ !important}

1 0

Replies

replied on January 8, 2021

That's a matter of specificity/precedence, and the underlying behavior isn't really something Laserfiche/Forms can change.

CSS doesn't not include anything that overrides !important, but if you have two things both using !important, then the most specific one will take precedence.

It's hard to say exactly what that'll need to be without seeing the CSS you're trying to override, but as long as it's not inline style with !important you should be able to override it with the right selectors.

For example,

label.cf-class {color: red !important;}

should be overridden by

.custom-class label.cf-class {color: blue !important;}

0 0
replied on January 8, 2021

I am thinking the problem is that it is already being called with a custom class .cf-formwrap

Therefore my CSS (.myClass input { }) does not override.

0 0
SELECTED ANSWER
replied on January 8, 2021

There's no reason you can't combine their class with your class. Technically everything is a "custom" class since there's no predefined ones in CSS, so in this context, when I say "custom class" I mean not one's built into Forms.

If theirs is .cf-formwrap, then add .cf-formwrap to yours too.

Like I said, if I want to override

.cf-formwrap input {___ !important}

I just need to be more specific, and its easier to narrow down what you need to do to raise the specificity if you use similar selectors like

.cf-formwrap .myClass input {____ !important}

1 0
replied on January 8, 2021

Oh cf-formwrap is the wrapper for everything on the form, so I was just able to add .cf-formwrap to my .myClass input and it worked. It seems whoever has the most classes wins! Thank you!

0 0
replied on January 8, 2021 Show version history

No problem. It's not necessarily the "most" classes, it's more about how "specific" the entire selector ends up being since id would outweigh classes.

CSS has a scoring system, the "total" score is a sum of values for each individual selector used for that line, and the highest score wins.

!important > inline style > id > class/attribute > element

It can be a real pain sometimes lol

CSS Specificity (w3schools.com)

0 0
replied on January 8, 2021

Oh those examples help a bit, I guess this change wins because it was more specific

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.