How to override Inline Style CSS?

html css inline-styles

11,752

Solution 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

Solution 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

11,752

Author by

Mike

Updated on July 13, 2022

Comments

Mike almost 2 years
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;
}
```
- Etheryte almost 9 years
  
  You're targeting children, not the same element when you use spaces.
- APAD1 almost 9 years
  
  All you need is input.button.cool-button { float: none !important; }
- Pavel Gatnar almost 9 years
  
  Do not use inline styling, use only css to override.
- user3466437 almost 9 years
  
  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.
- Mike almost 9 years
  
  @user3466437 Thanks for that! But no it is not the actual HTML
- pablito.aven almost 9 years
  
  You should not be using inline style, it is awful.
- Scott almost 9 years
  
  Currently the inline styles are using important!, you might mean !important.
- Heretic Monkey over 3 years
  
  Does this answer your question? How can I override inline styles with external CSS?
Mike almost 9 years

I thought so. Either way - is the syntax correct the way I selected multiple psuedo-classes?
indubitablee almost 9 years

@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
BoltClock almost 9 years

@indubitablee: style refers to the style attribute. It's not any different from the value and name attributes.