更改所需 Chosen jQuery select 框的边框颜色

Question

简而言之，如何更改 Chosen jQuery select 框的边框颜色？我假设你可以用 CSS 做到这一点，但我不太清楚如何。

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

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

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

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

如果可能的话，我还想在它们被禁用时更改背景颜色。

Answer 1

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

在 select 元素上提供 required class，并为此 select 或 设置 css .required>选择单

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

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

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 { ... }

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

参考：Adjacent Sibling Combinator

更改所需 Chosen jQuery select 框的边框颜色

Change border color of required Chosen jQuery select boxes

jquery-chosen