html - 根据值更改按钮 css

Question

是否可以根据值更改按钮 css。我想为类型按钮使用不同的保存 css 和不同的取消 css。

例如:

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

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

注意:我不能使用类，因为所有输入都具有相同的类，因为有很多按钮。我也不想使用 Jquery。

Answer 1

是的，有一个属性选择器。

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

要定位特定的按钮类型，您需要多个属性选择器

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