How to override Inline Style CSS?

Question

I have tried the div[style] The problem is this is not the only element with inline styles

The HTML

<input class="button cool-button" style="float: right !important color:blue" value="Hello" name="hello">
<input class="button cool-button" style="float: right !important color:blue" value="World" name="hello">
<input class="button cool-button" style="float: right !important  color:blue" value="Submit" name="submit">

I am targeting the submit button

This is how I attempted to over-ride the css on my external style sheet...

input.button .cool-button[style] [value="Submit"] [name="submit"] {
    float: none !important;
}

You're targeting children, not the same element when you use spaces. — Etheryte, Sep 08 '15 at 17:27
All you need is `input.button.cool-button { float: none !important; }` — APAD1, Sep 08 '15 at 17:28
Along with your CSS there are also syntax errors in the inline styles. If that's what your HTML really looks like, then there's actually nothing to override since the inline style attributes are completely malformed. — user3466437, Sep 08 '15 at 17:39
@user3466437 Thanks for that! But no it is not the actual HTML — Mike, Sep 08 '15 at 17:51
Currently the inline styles are using `important!`, you might mean `!important`. — Scott, Sep 08 '15 at 18:10
Does this answer your question? [How can I override inline styles with external CSS?](https://stackoverflow.com/questions/16813220/how-can-i-override-inline-styles-with-external-css) — Heretic Monkey, Oct 16 '20 at 14:14

score 4 · Accepted Answer · answered Sep 08 '15 at 17:32

4

if your inputs have the !important syntax in the inline style, than that will take precedence over any css/styles to that element so you wont be able to float:none.

<input class="button cool-button" style="float: right !important; color:blue" value="Hello" name="hello">

however, if your inputs do not have !important, you can do the following

input.button.cool-button { 
    float: none !important; 
}

<input class="button cool-button" style="float: right ; color:blue" value="Hello" name="hello">
<input class="button cool-button" style="float: right ; color:blue" value="World" name="hello">
<input class="button cool-button" style="float: right ; color:blue" value="Submit" name="submit">

and the float:none in the css sheet will override the float: right that is inline

answered Sep 08 '15 at 17:32

indubitablee

8,136
2
25
49

I thought so. Either way - is the syntax correct the way I selected multiple psuedo-classes? – Mike Sep 08 '15 at 17:36
1

@Mike the `[value=""]` and `[name=""]` selectors were correct, but i dont think `style` exists. also, as was stated before by Nit, you also have to get rid of the spaces in your selectors. spaces means children of element, no spaces means same element – indubitablee Sep 08 '15 at 17:41
@indubitablee: `style` refers to the style attribute. It's not any different from the value and name attributes. – BoltClock Sep 08 '15 at 17:42

score 1 · Answer 2 · answered Oct 06 '16 at 09:18

It is just one step process that you need to add

Element[style].button.cool-button{
float:left !important;
}

For Example based in your case

<input class="button cool-button" style="float: right ; color:blue" value="Hello" name="hello">

Create Custom.css file and add the following line of code

/*To override inline style sheet for 'Input' Element*/

input[style].button.cool-button{
float:left !important;
color:white !important;
}

Hope fully it will help someone! Thank you Cheers Ishwor Khanal

score 0 · Answer 3 · answered Sep 08 '15 at 17:39

0

Use an extra extension:

input.button.cool-button.right{
  float: right;
}

And add the right class instead of the style to the input tags.

However use clear: right to cancel the floating.

answered Sep 08 '15 at 17:39

Pavel Gatnar

3,987
2
19
29

score -1 · Answer 4 · edited May 24 '18 at 14:24

-1

input.button.cool-button { 
    float: none !important; 
}

I hope this helps

edited May 24 '18 at 14:24

alex

5,467
4
33
43

answered May 24 '18 at 14:01

keith Brown

1

How to override Inline Style CSS?

4 Answers4