Geek Answers Handbook

Override Inline Styles Added via JS with CSS

The js plugin adds a style that gives me some headache:

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

So, I 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.

+7
source share
3 answers

Unlike other answers, you can override inline styles using CSS:

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

I would suggest that an extremely long selector might not fall into an element.

I had a similar z-index problem with the Janrain plugin, which was solved as follows:

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

In your case, you will probably need:

  z-index: 0 !important;
+9
source

The inline style will surpass any selectors. Either reset the style yourself in javascript or patch the plugin ... it seems to be not very well written, to be honest. :)

+4
source

the inline style always overrides the external and internal CSS, and the fact that the plugin uses the !important clause (very bad practice!) all together makes it impossible to fix it only with css. I believe that you will have to use some custom js to override the plugin settings.

perhaps the best way is to check if you can specify a callback function with the plugin and set the style as you like. another answer here suggested editing the plugin itself, which is great if you do not plan to update it, otherwise you better leave the plugin code as is, and just add some special js of your own

+3
source

More articles:


All Articles