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

Answer 2

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

Answer 3

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.

Answer 4

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

I hope this helps