根據值更改按鈕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">

Answer 2

使用CSS屬性選擇：

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

Answer 3

我認爲jQuery的似乎沒有必要。
按鈕很大，必須使用該類。
試試這個代碼。

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