將CSS應用於HTML select標簽
[英]Apply CSS to HTML select tag
問題描述
我如何使用下面的select標簽的名稱或ID來將CSS應用於它？
<div class="span5">
<select name="fields[abc][]" id="fields[abc]" style="width: 300px;" size="7" multiple="true">
<option title="abc" value="abc">abc</option>
<option title="Other" value="Other">Other</option>
</select>
</div>
這不起作用：
select[name=fields[abc][]] {
background-color: yellow !important;;
border: 1px solid #ccc;
min-height: 550px;
}
這是小提琴
5 個解決方案
解決方案1
1 2015-02-04 07:46:00
您的CSS選擇器不正確。 將您的CSS更改為：
option[title='abc'] {
background-color: yellow !important;;
border: 1px solid #ccc;
min-height: 550px;
}
工作代碼段：
option[title='abc'] { background-color: yellow !important;; border: 1px solid #ccc; min-height: 550px; }
<body> <div class="span5"> <select name="fields[abc][]" id="fields[abc]" style="width: 300px;" size="7" multiple="true"> <option title="abc" value="abc">abc</option> <option title="Other" value="Other">Other </option> </select> </div> </body>
解決方案2
1 2015-02-04 07:46:12
您的name屬性中有[和] ，雖然不是一個好主意，但是您當然可以使用它們，只需要在CSS中將它們轉義即可
工作提琴 ： http : //jsfiddle.net/cbbvb40a/1/
select[name=fields\[abc\]\[\]] {
background-color: yellow !important;;
border: 1px solid #ccc;
min-height: 550px;
}
您可以通過這種方式在CSS中使用所有特殊字符，在這里您可以找到Read https://mothereff.in/css-escapes
解決方案3
1 已采納 2015-02-04 07:50:03
將屬性值用雙引號引起來：
select[name="fields[abc][]"] {
}
演示：
select[name="fields[abc][]"] { background-color: yellow !important; border: 1px solid #ccc; min-height: 550px; }
<select name="fields[abc][]" id="fields[abc]" style="width: 300px;" size="7" multiple="multiple"> <option title="abc" value="abc">abc</option> <option title="Other" value="Other">Other</option> </select>
解決方案4
1 2015-02-04 07:53:28
有許多不同的解決方案。 在您的特定示例中，只需編寫
select {
選擇器將做。
或者，如果您需要更具體一點，
div.span5 > select {
另一個是逃避方括號：
select[name=fields\[abc\]\[\]] {
或在名稱中加上引號
select[name='fields[abc][]'] {
或定位ID，也要使用轉義括號
#fields\[abc\] {
編輯：
另一個選擇是，當您非常絕望時，繼續執行原始代碼中已經開始的內容，並對整個過程使用內聯style屬性。 這樣，您就不必使用樣式表來定位任何對象。
解決方案5
0 2015-02-04 08:26:47
根據規范 ，
屬性值必須是標識符或字符串。
但是， fields[abc][]
不是字符串，因為它沒有引號：
字符串可以用雙引號或單引號書寫。
不是標識符 ，因為它包含
[和]：標識符只能包含字符[a-zA-Z0-9]和ISO 10646字符U + 00A0及更高版本，以及連字符（-）和下划線（_）； 它們不能以數字，兩個連字符或連字符后跟數字開頭。 標識符還可以包含轉義字符和任何ISO 10646字符作為數字代碼（請參閱下一項）。
要修復它，您可以
使用字符串：
"fields[abc][]"或'fields[abc][]'。select[name="fields[abc][]"] { background-color: yellow !important;; border: 1px solid #ccc; min-height: 550px; }<div class="span5"> <select name="fields[abc][]" id="fields[abc]" style="width: 300px;" size="7" multiple="true"> <option title="abc" value="abc">abc</option> <option title="Other" value="Other">Other </option> </select> </div>使用有效的標識符，轉義必要的字符
反斜杠轉義符使作者可以引用他們不容易放入文檔中的字符。 在這種情況下，反斜杠后面最多包含六個十六進制數字（0..9A..F），代表具有該數字的ISO 10646（ [ISO10646] ）字符，該數字不能為零。 （在CSS 2.1中未定義，如果樣式表確實包含Unicode碼為零的字符，會發生什么。）如果范圍[0-9a-fA-F]內的字符跟隨十六進制數，則該數字的末尾需要弄清楚。 有兩種方法可以做到這一點：
- 帶有空格（或其他空格字符）：“ \\ 26 B”（“＆B”）。 在這種情況下，用戶代理應將“ CR / LF”對（U + 000D / U + 000A）視為單個空格字符。
- 通過提供恰好6個十六進制數字：“ \\ 000026B”（“＆B”）
然后，
- 轉義
[用\\[，\\5b或\\00005b - 使用
\\]，\\5d或\\00005d轉義]
例如，
fields\\[abc\\00005d\\5b \\]。select[name=fields\\[abc\\00005d\\5b \\]] { background-color: yellow !important;; border: 1px solid #ccc; min-height: 550px; }<div class="span5"> <select name="fields[abc][]" id="fields[abc]" style="width: 300px;" size="7" multiple="true"> <option title="abc" value="abc">abc</option> <option title="Other" value="Other">Other </option> </select> </div>
如何僅使用 CSS 根據 html 標簽的內容應用 css？
[英]How to apply css based on the content of the html tag using only CSS?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.