How to override !important CSS?

Hello, I am having difficulty to run Custom CSS. I tried the following code but It doesn’t overriding on !important element.

.fc-ab-root .fc-dialog-overlay {
  opacity: 1 !important;
  backdrop-filter: blur(7px) !important;
  -webkit-backdrop-filter: blur(7px) !important;
  background-color: rgb(5 10 18 / 58%) !important;
}

Screenshot_4

I also tried to implement with jQuery script, it’s working on the console but it won’t work when I implement from the backend.

document.querySelector('.fc-ab-root .fc-dialog-overlay').style.cssText = "opacity: 1 !important; backdrop-filter: blur(7px) !important; -webkit-backdrop-filter: blur(7px) !important; background-color: rgb(5, 10, 18, 0.58) !important;";

Can anyone help me please?

Thanks & Regard
Abhishek

You didn’t show the rule that you were trying to override?

Without knowing what set the rule in the first place then you can’t override it as you need to at least match the weight and specificity.

1 Like

By default, using the script it run stylesheet with !important

I have to run my Custom CSS. How to fix?

Whoops it looks like you did show me the original rules :slight_smile:

The problem must be that your rules have been placed earlier in the cascade but need to be later.

You could add more specificity to them if that’s not possible by using a parent class on the selector.

As a test add body before your custom rules.



body .fc-ab-root .fc-dialog-overlay {
2 Likes

Sir, You are a diamond. Thank you so much. :pray:

Screenshot_6

1 Like