如何使用CSS按名称定位<select>表单元素？</select>

Question

我有3个表单元素

<select name="closing_date[]"></select>

这些是生成的，因此无法添加类或ID，我的css什么也不做

select[name=closing_date] {
  width: 33% !important;
  background: red;
}

Answer 1

Demo Fiddle

尝试：

select[name^=closing_date] {
  width: 33% !important;
  background: red;
}

请参阅this article from MDN on attribute selectors

  

[ATTR ^ =值]

     

表示属性名称为attr和的元素   其值的前缀为＆＃34;值＆＃34;。

Answer 2

应该是

select[name="closing_date[]"] {
    width: 33% !important;
    background: red;
}

DEMO here.

Answer 3

这也是有效的：

HTML

<select name="closing_date[]"></select>
<select name="closing_date[]"></select>
<select name="closing_date[]"></select>

CSS

select[name='closing_date[]'] {
  width: 33% !important;
  background: red;
}