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;


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

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 {

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


1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.