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

Answer 1

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