How to override a CSS style marked as !important?

Question

Trying to write a widget for openHAB (user UI is based on F7-framework), I added a stylesheet for slider element like this:

stylesheet: >
  .range-knob {
    width: 180px;
    height: 70px;
    translate: -50% -85%;
    clip-path: path('M180.3,35.5c-59.2,0-56.3-35-92.4-35s-31.9,35-87.6,35h0.2c55.9,0,51.7,35,87.6,35S121.1,35.5,180.3,35.5')!important;
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 36.9 36.9' style='enable-background:new 0 0 36.9 36.9;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23004BAD;%7D .st1%7Bfill:%2364B5F6;%7D .st3%7Bfont-family:'ArialMT';%7D .st4%7Bfont-size:12px;%7D%0A%3C/style%3E%3Cpath class='st0' d='M0,18.4C0,8.3,8.3,0,18.4,0s18.4,8.3,18.4,18.4s-8.3,18.4-18.4,18.4S0,28.6,0,18.4z'/%3E%3Cg%3E%3Cpath class='st1' d='M29.2,22.2c0-5.7-10.7-19.6-10.7-19.6S7.7,16.5,7.7,22.2s4.8,10.4,10.7,10.4S29.2,27.9,29.2,22.2z'/%3E%3Cpath class='st1' d='M18.1,28.8c-3.5,0-6.4-2.8-6.4-6.2c0-1,0.8-1.8,1.8-1.8s1.8,0.8,1.8,1.8c0,1.5,1.2,2.7,2.8,2.7 c1,0,1.8,0.8,1.8,1.8C19.9,28,19.1,28.8,18.1,28.8z'/%3E%3C/g%3E%3Ctext transform='matrix(1 0 0 1 12.9397 27.1544)' class='st0 st3 st4'%3E%25%3C/text%3E%3C/svg%3E%0A")!important;
     background-position: center!important;
     background-repeat: no-repeat!important;
     background-size: 30%;
   }

And it worked, but not for Android platform, where another style applies on top of mine: Screenshot from mobile browser

.md .range-slider-min:not(.range-slider-dual) .range-knob {
    background: #fff!important;
    border: 2px solid var(--f7-range-bar-bg-color);
}

making background image disappear. How can I get rid of this style?

As you can see, I tried to use !important in my stylesheet, but still they are overrided.

is it possible to use a JavaScript to remove the !important style? Then maybe your style will run. — dram95, Feb 10 '23 at 21:52
Nope. It's a smart home system, so JavaScript is blocked to customize for UI, there was a battle to get even user defined stylesheets. — Вася Пупкин, Feb 10 '23 at 21:59

score 0 · Answer 1 · answered Feb 10 '23 at 20:54

0

Before anything I don't recommend you to use !importants, it is considered a bad practice and even worse to override one, if you can avoid it please do it.

Anyways your not asking for my opinion on !importants and you may be in a situation where you need to modify a class that you can't access.

Answer

When defining CSS classes the one defined later wins so try to define the new class later on the file, if you don't have access to that file try to load the new one later.

        <link rel="stylesheet" href="1.css">
        <link rel="stylesheet" href="2.css">

Is not the same as:

        <link rel="stylesheet" href="2.css">
        <link rel="stylesheet" href="1.css">

answered Feb 10 '23 at 20:54

rwpk9

304
1
15

My use of !important is a try to override the !important flag of framework's default CSS. My CSS is already loaded later - mine stylesheet is defined in element's parent div, while the default is for the whole page, however, with or without !important flag in my stylesheet, .range-slider-min still overrides my background. Maybe I should define .range-slider-min class in my stylesheet, which is loaded later and should override the default with !important, but I can't figure out how to define background properly to draw both background fill and background image with inline SVG in just one string – Вася Пупкин Feb 10 '23 at 21:43

How to override a CSS style marked as !important?

1 Answers1

Answer