2

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;
}
Improve this question
8
  • 4
    You're targeting children, not the same element when you use spaces. Commented Sep 8, 2015 at 17:27
  • All you need is input.button.cool-button { float: none !important; } Commented Sep 8, 2015 at 17:28
  • 1
    Do not use inline styling, use only css to override. Commented Sep 8, 2015 at 17:33
  • 1
    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. Commented Sep 8, 2015 at 17:39
  • @user3466437 Thanks for that! But no it is not the actual HTML Commented Sep 8, 2015 at 17:51

4 Answers 4

Reset to default
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

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

I thought so. Either way - is the syntax correct the way I selected multiple psuedo-classes?
@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: style refers to the style attribute. It's not any different from the value and name attributes.
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

Improve this answer

Comments

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.

Improve this answer

Comments

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

I hope this helps

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.