CODEWITHSUNDEEP
htmlcss
Shahil Mohammed
Shahil Mohammed

Reputation: 3868

Change button css based on value

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.

Upvotes: 0

Views: 4777

Answers (3)

Paulie_D
Paulie_D

Reputation: 115174

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">

Upvotes: 11

F. Kim
F. Kim

Reputation: 53

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">

Upvotes: 1

AB Udhay
AB Udhay

Reputation: 753

Use CSS Attribute Selectors :

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

Upvotes: 1

Related Questions