Override element.style using CSS

Question

I have an HTML page from page builder, and it injects style attribute directly to the element. I found it's considered as element.style.

I want to override it using CSS. I can match the element, but it doesn't override it.

screenshot

How can I override the style using CSS?

Find the source of the style injection and remove it? If it isn't in your document source, it is probably coming from JavaScript somewhere. — cimmanon, Feb 16 '13 at 13:13
command + shift + f (on a mac) or ctrl + shift + f (on a pc) — maahd, Apr 17 '15 at 09:25
Note an alternative in JS may be to remove the added property using [`removeProperty()`](https://developer.mozilla.org/docs/Web/API/CSSStyleDeclaration/removeProperty), i.e. e.g. `document.querySelector("li").style.removeProperty("display");` Then you also do not need to provide a new default value (like you have to do with `!important`, but the inheritance chain just "jumps in". — rugk, Mar 20 '20 at 15:23

score 142 · Accepted Answer · answered Feb 16 '13 at 13:07

142

Although it's often frowned upon, you can technically use:

display: inline !important;

It generally isn't good practice but in some cases might be necessary. What you should do is edit your code so that you aren't applying a style to the <li> elements in the first place.

answered Feb 16 '13 at 13:07

DiscoInfiltrator

1,989
1
18
21

20

element.style means that it's in the markup, so in your html, you'd see `
`

DiscoInfiltrator

Feb 16 '13 at 13:14

1

In jQuery when using the show() method, display: block; is applied to the element styles. I wanted it to be display: inline-block; though. I first solved it by not using this method and using .css('display', 'inline-block'); instead. However, after reading this example I think I will change to using !important. – Simon Bengtsson Dec 29 '13 at 01:01

jQuery sets the display property to whatever the default is for the element that it's showing. – folktrash Feb 04 '14 at 16:54

2

Literally just exclaimed "gtf outta here" when this worked for me, upset my girlfriend – jag Oct 20 '16 at 04:10

3

Most of these comments assume they have access to the source code. I wouldn't need to do these bad practices if coders didn't put out libraries with inline styles added. – TallOrderDev May 03 '19 at 04:14

score 23 · Answer 2 · edited Apr 29 '16 at 23:38

23

This CSS will overwrite even the JavaScript:

#demofour li[style] {
    display: inline !important;
}

or for only first one

#demofour li[style]:first-child {
    display: inline !important;
}

edited Apr 29 '16 at 23:38

Andrew T.

4,701
8
43
62

answered Apr 16 '14 at 06:50

Kuldar Leement

231
3
6

score 13 · Answer 3 · answered Feb 16 '13 at 13:07

13

element.style comes from the markup.

<li style="display: none;">

Just remove the style attribute from the HTML.

answered Feb 16 '13 at 13:07

Ayman Safadi

11,502
1
27
41

Im not adding

D-W

Feb 16 '13 at 13:11

It's injected somewhere. I am looking for it too, I think Google Maps does this D: – icedwater Apr 24 '14 at 02:32

3

If it's injected than he cannot reach it and remove it himself, he has to override it – jonyB Dec 22 '19 at 13:45

@jonyB is there a simple way to override injected material? I am facing a similar issue. – Benjamin Salerno Sep 07 '21 at 20:46

@Benjamin Salerno so I'm not near my computer rn, but as a partial answer - selecting an element using css has a certain "weight", if you want to override an injected css you'll need to give that element a "havier" selection in your own CSS file. Further reading: https://stackoverflow.com/questions/2809024/how-are-the-points-in-css-specificity-calculated https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#selector_types – jonyB Sep 08 '21 at 23:57

score 7 · Answer 4 · answered Apr 08 '16 at 17:40

Of course the !important trick is decisive here, but targeting more specifically may help not only to have your override actually applied (weight criteria can rule over !important) but also to avoid overriding unintended elements.

With the developer tools of your browser, identify the exact value of the offending style attribute; e.g.:

"font-family: arial, helvetica, sans-serif;"

or

"display: block;"

Then, decide which branch of selectors you will override; you can broaden or narrow your choice to fit your needs, e.g.:

p span

or

section.article-into.clearfix p span

Finally, in your custom.css, use the [attribute^=value] selector and the !important declaration:

p span[style^="font-family: arial"] {
  font-family: "Times New Roman", Times, serif !important;
}

Note you don't have to quote the whole style attribute value, just enough to unambigously match the string.

score 6 · Answer 5 · answered Aug 13 '13 at 06:27

6

Using !important will override element.style via CSS like Change

color: #7D7D7D;

to

color: #7D7D7D !important;

That should do it.

answered Aug 13 '13 at 06:27

user2677440

61
1
1

score 4 · Answer 6 · answered Mar 07 '18 at 19:38

4

you can override the style on your css by referencing the offending property of the element style. On my case these two codes are set as 15px and is causing my background image to go black. So, i override them with 0px and placed the !important so it will be priority

.content {
    border-bottom-left-radius: 0px !important;
     border-bottom-right-radius: 0px !important;
}

answered Mar 07 '18 at 19:38

tesla_coil

191
2
7

this technique is helpful when you are not able to remove/change inline style directly editing or by DOM manipulation. i.e ASP.Net Blazor app – Pranav Oct 16 '21 at 17:25

score 1 · Answer 7 · edited Apr 05 '21 at 14:25

1

As per my knowledge Inline sytle comes first so css class should not work.

Use Jquery as

$(document).ready(function(){
   $("#demoFour li").css("display","inline");
});

You can also try

#demoFour li { display:inline !important;}

edited Apr 05 '21 at 14:25

General Grievance

4,555
31
31
45

answered Feb 16 '13 at 13:10

user1990587

386
4
15

score 0 · Answer 8 · answered Feb 16 '13 at 13:31

0

Use JavaScript.

For example:

var elements = document.getElementById("demoFour").getElementsByTagName("li");
for (var i = 0; i < elements.length; i++) {
    elements[i].style.display = "inline";
}

answered Feb 16 '13 at 13:31

Kenta Kubo

59
1
2

Override element.style using CSS

8 Answers8

Linked