Question

简单地说，如何更改选择的jQuery选择框的边框颜色？我假设你可以用CSS做到但我无法弄清楚如何。

$(".pnChosen").chosen({
    search_contains: true
});

<select required class="pnChosen"></select>

我可以用它来改变所有这些的边框颜色，但我只想更改我根据需要标记的颜色。

.chosen-container{
   border: 1px solid red;
}

如果可能的话，我也希望在禁用它们时更改背景颜色。

Answer 1

您可以使用所选的 inherit_select_classes 选项。

在select元素上提供必需的类，并为此选择器设置css .required＆gt; selected-single

＆＃13;

$(".pnChosen").chosen({
  search_contains: true,
  inherit_select_classes: true
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.css" rel="stylesheet" />
<style>
  .required>.chosen-single {
    border: 1px solid #EE0000;
  }
</style>
<select required class="pnChosen required">
  <option>Option 1</option>
  <option>Option 2</option>
</select>

＆＃13;

Answer 2

另一种选择是在CSS中使用adjacent sibling combinator (+)选择器来实现所需的样式。

例如：

HTML

<select id="myselect" required="required">
...
</select>
<div id="myselect_chosen" class="chosen-container chosen-container-single">
  <a class="chosen-single">
  ...
  </a>
</div>

CSS

select:required + div.chosen-container a { ... }

这将立即在div.chosen-container a之后将所需的样式应用于您的select:required DOM元素。请注意，如果您尝试覆盖现有的选定样式，则可能仍必须建立CSS优先级，以便您的定义可以取代任何现有的选定样式。

参考：Adjacent Sibling Combinator

更改所需选择的jQuery选择框的边框颜色

2 个答案: