将 CSS 应用于 HTML select 标签

Question

如何使用下面的 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;
}

这是fiddle

Answer 1

您的 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>

Updated jsFiddle

阅读： Selectors | MDN

Answer 2

你的name属性中有[和]，这不是一个很好的主意，但是你当然可以使用它们，你只需要在[=23=中转义它们]

工作 fiddle : http://jsfiddle.net/cbbvb40a/1/

select[name=fields\[abc\]\[\]] {    
    background-color: yellow !important;;
    border: 1px solid #ccc;
    min-height: 550px;
}

你可以这样使用css中的所有特殊字符，在这里你可以找到阅读 https://mothereff.in/css-escapes

Answer 3

将属性值括在双引号内：

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>

Answer 4

有许多不同的解决方案。在您的具体示例中，只需编写

select {

选择器就可以了。

或者如果您需要更具体，

div.span5 > select {

另一种是对方括号进行转义：

select[name=fields\[abc\]\[\]] {

或者把名字放在引号里

select[name='fields[abc][]'] {

或定位 id，也使用转义括号

#fields\[abc\] {

编辑：
另一种选择，当你真的绝望时，是继续你已经在原始代码中开始的事情，并为整个事情使用内联 style 属性。这样，您就不必使用样式表来定位任何内容。

Answer 5

根据 spec,

Attribute values must be identifiers or strings.

然而，fields[abc][]

不是字符串，因为它没有引号：

Strings can either be written with double quotes or with single quotes.
不是 identifier，因为它包含 [ 和 ]:

identifiers can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item).

要修复它，您可以

使用字符串："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>

使用有效的标识符，转义必要的字符
Backslash escapes allow authors to refer to characters they cannot easily put in a document. In this case, the backslash is followed by at most six hexadecimal digits (0..9A..F), which stand for the ISO 10646 ([ISO10646]) character with that number, which must not be zero. (It is undefined in CSS 2.1 what happens if a style sheet does contain a character with Unicode codepoint zero.) If a character in the range [0-9a-fA-F] follows the hexadecimal number, the end of the number needs to be made clear. There are two ways to do that:
- with a space (or other white space character): " B" ("&B"). In this case, user agents should treat a "CR/LF" pair (U+000D/U+000A) as a single white space character.
- by providing exactly 6 hexadecimal digits: "[=31=]0026B" ("&B")
然后，
- 用 \[、b 或 [=22=]005b
- 使用 \]、d 或 [=26=]005d
例如，fields\[abc[=27=]005db \].
```
select[name=fields\[abc[=12=]005db \]] {    
    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 select 标签

Apply CSS to HTML select tag

html

css

css-selectors