CODEWITHSUNDEEP
javascripthtmlcssinline-styles
Jamie Hutber
Jamie Hutber

Reputation: 28076

Override Inline Styles added via JS with CSS

A js plugin is adding a style that is giving me some headache:

element.style {
     z-index: 100 !important;
}

So i have tried this:

html body div#shell div#shellContent div#bottomPart div#rightCol div.containerBox    
div#embedContainer div#janrainEngageEmbed div.janrainContent div#janrainView   
div.janrainHeader[style] {
    z-index: 1 !important;
}

and still nothing.

Upvotes: 9

Views: 16336

Answers (3)

Jeff Clemens
Jeff Clemens

Reputation: 942

Contrary to the other answers, it is possible to override inline styles with CSS:

http://css-tricks.com/override-inline-styles-with-css/

I would guess that the extremely long selector might not be hitting the element.

I had a similar z-index issue with the Janrain plugin that was solved by this:

#janrainEngageEmbed > div[style] {
    z-index: 0;
}

In your case, you probably need:

    z-index: 0 !important;

Upvotes: 12

Luca
Luca

Reputation: 9705

inline style always override external and internal css, plus the fact that the plugin is using the !important clause (very bad practice!), all together makes it impossible to get it fixed with css only. I reckon you will have to use some custom js to override the plugin settings.

maybe the best way would be to check if you can specify a callback function with the plugin and set the style as you wanted. another answer here suggested to edit the plugin itself, that is cool if you don't plan to ever update it - otherwise you're better off leaving the plugin code as it is, and just adding some bespoke js of your own

Upvotes: 3

John Green
John Green

Reputation: 13435

The inline style will trump any selectors. Either reset the style yourself in javascript or patch the plugin... it doesn't sound like a particularly well written anyway, to be honest. : )

Upvotes: 4

Related Questions