Change button css based on value

Question

Is it possible to change the button css based on values. I want to have different css for Save and different css for Cancel for type button.

Ex:

<input type="button" value="Save">
<input type="button" value="Cancel">

save { /* Some CSS */ }
cancel{ /* Some CSS */ }

NOTE : I cannot use class as all the input is having same class as there are plenty of buttons. Also I dont want to use Jquery.

@Tommy I have edited the question. If i target value directly it will effect the textbox with text save. I want to target type button with save value. Is that possible ? — Shahil Mohammed
– Shahil Mohammed, Commented Sep 29, 2016 at 10:31

Paulie_D · Accepted Answer · 2016-09-29 14:05:41Z

11

Yes, with an attribute selector.

input[value="Save"] {
  color: red;
}
input[value*="Cancel"] {
  color: blue;
}

<input type="submit" value="Save">
<input type="submit" value="Cancel">
<input type="text" value="Cancel-me-too">

To target specific button type you need more than one attribute selector

input[type="submit"][value="Save"] {
  color: red;
}
input[type="submit"][value*="Cancel"] {
  color: blue;
}

<input type="submit" value="Save">
<input type="submit" value="Cancel">
<input type="text" value="Save">

edited Sep 29, 2016 at 14:05

answered Sep 29, 2016 at 9:36

Paulie_D

116k13 gold badges168 silver badges185 bronze badges

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

1 Comment

Shahil Mohammed Over a year ago

I have edited the question. If i target value directly it will effect the textbox with text save. I want to target type button with save value. Is that possible ?

AB Udhay · Accepted Answer · 2016-09-29 09:36:53Z

1

Use CSS Attribute Selectors :

input[value="Save"] {background:green;}
input[value="Cancel"] {background:grey;}

answered Sep 29, 2016 at 9:36

AB Udhay

7634 silver badges10 bronze badges

1 Comment

Shahil Mohammed Over a year ago

I have edited the question. If i target value directly it will effect the textbox with text save. I want to target type button with save value. Is that possible ?

F. Kim · Accepted Answer · 2016-09-29 09:42:44Z

1

I think jquery seems to be no need.
Button is large, the class must be used.
Try this code.

<style type="text/css">
input[value="Save"] {
  color: green;
}
input[value*="Cancel"] {
  color: black;
}
</style>
<input type="submit" value="Save">
<input type="submit" value="Cancel">

answered Sep 29, 2016 at 9:42

F. Kim

531 silver badge9 bronze badges

1 Comment

Shahil Mohammed Over a year ago

I have edited the question. If i target value directly it will effect the textbox with text save. I want to target type button with save value. Is that possible ?

Collectives™ on Stack Overflow

Change button css based on value

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related