108

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?

4
  • 3
    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. Commented Feb 16, 2013 at 13:13
  • 2
    How can you find the source? Commented Sep 5, 2013 at 11:30
  • 2
    command + shift + f (on a mac) or ctrl + shift + f (on a pc) Commented Apr 17, 2015 at 9:25
  • Note an alternative in JS may be to remove the added property using 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". Commented Mar 20, 2020 at 15:23

8 Answers 8

149

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.

Sign up to request clarification or add additional context in comments.

5 Comments

element.style means that it's in the markup, so in your html, you'd see <li style="display: none;">
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.
jQuery sets the display property to whatever the default is for the element that it's showing.
Literally just exclaimed "gtf outta here" when this worked for me, upset my girlfriend
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.
25

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;
}

Comments

13

element.style comes from the markup.

<li style="display: none;">

Just remove the style attribute from the HTML.

5 Comments

Im not adding <li style="display: none;">
It's injected somewhere. I am looking for it too, I think Google Maps does this D:
If it's injected than he cannot reach it and remove it himself, he has to override it
@jonyB is there a simple way to override injected material? I am facing a similar issue.
@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: stackoverflow.com/questions/2809024/… developer.mozilla.org/en-US/docs/Web/CSS/…
7

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.

Comments

6

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

color: #7D7D7D;

to

color: #7D7D7D !important;

That should do it.

Comments

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;
}

1 Comment

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
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;}

Comments

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";
}

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.