0

I have some buttons that I wish to change the styles of and they each have different values. None of them have any classes or ids assigned to them. Is there any way to change the styles of buttons based on the value they have?

    <input type="button" value="Subscribe">

is what I am wanting to edit. What would be the best way to do what I have described above? If you have any more questions on the issue please feel free to ask.

EDIT: What if I wish to replace the old styles as well?

2
  • You could use a CSS attribute selector based on the value: jsfiddle.net/jEMja but this will ONLY affect the value text, not the whole HTML node. Otherwise, you will need to use JavaSCript Commented Jul 16, 2014 at 21:25
  • Why don't you use a class? Commented Jul 16, 2014 at 21:36

1 Answer 1

2

You can use a CSS selector to select them by their attributes. In this case:

input[value="Subscribe"] {
  /* Styles Go Here */
}

would allow you to apply styles to just that one button, provided no other buttons have that same value attribute.

EDIT: You asked about will it override existing styles. The answer is "it depends."

If these rules are in the same place as your other rules for buttons (e.g., this button's rules are in the same external stylesheet as the other button rules, or in the same embedded stylesheet), then it will follow the order of precedence in CSS: http://www.alternategateways.com/tutorials/css/css-101/part-four-the-css-order-of-precedence. CSS selectors by attribute defer only to selectors by ID.

Of course, you can always make these rules inline or use !important to override them if you have to, but that may cause later problems, so don't do that unless you absolutely have to.

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

1 Comment

what if I wanted to change the background to a url. Would this work with that?

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.