如何为jQuery Chosen选择框添加样式

Question

我正在使用 jQuery 的 chosen 插件来创建一个 multi-select 选择框。然而，我发现预定义在 chosen.css 文件中的样式很难覆盖，完全删除 chosen.css 也可能不是一个很好的选择。

这是我的示例代码： https://jsfiddle.net/k1Lr0342/

HTML：

<select class="chosen" multiple="true" style="height: 34px; width: 280px">
  <option>Choose...</option>
  <option>jQuery</option>
  <option selected="selected">MooTools</option>
  <option>Prototype</option>
  <option selected="selected">Dojo Toolkit</option>
</select>

样式表：

.chosen-choices {
    border-radius: 3px;
    box-shadow: inset 0px 1px 2px rgba(0,0,0,0.3);
    border: none;
    height: 34px !important;
    cursor: text;
    margin-top: 12px;
    padding-left: 15px;
    border-bottom: 1px solid #ddd;
    width: 285px;
    text-indent: 0;
    margin-left: 30px;
  }

我试图直接编写对.chosen-choices ul的css样式。有些属性，如border-radius和box-shadow可行。但是其他一些属性, 如margin、height、padding、border等，会被chosen.css文件重载。一个选项是为每个不起作用的设置添加!important。这对大多数内容都有效，但高度仍然无法解决。有什么想法吗？

- Lance Shi

---

我认为将你的新CSS包含在chosen.css下方会解决你的问题。你尝试过了吗？ - ketan

@ketan 我试过了，但好像不起作用。 - Lance Shi

Answer 1

CSS可以接受使用更具体选择器的样式。

.chosen-container-multi .chosen-choices {
    /*blah blah*/
}

.chosen-choices {
    /* less specificity, this style might not work  */
}

演示链接

这是一个可运行的代码示例。

- blurfx

---

您可以通过简单地重复类选择器来增加特定性，就像这样：.chosen-choices.chosen-choices。 - wiiiiilllllll

Answer 2

试着使用jQuery，这里是可用的JSFIDDLE

$(".chosen-choices li").css("background","red");

- Shoeb Mirza

Answer 3

我不得不使用：

$(".chzn-results li").css("width", "100%");

不确定是因为我使用的版本太旧还是其他原因。

- Post Impatica

Answer 4

对于那些感兴趣的人，这是我编写的一些Sass代码，可以为所选的选择框设置样式。最大的问题是它使用背景而不是背景颜色，这就是为什么它会忽略你的CSS颜色的原因。

.chosen-drop border-bottom-left-radius: 10px border-bottom-right-radius: 10px

&.chosen-results li.result-selected display: none !important

.chosen-select option display: none

.chosen-container width: 100% !important

.chosen-choices padding: 5px !important background: $inputBackground !important

li.search-choice color: $text !important background: $alternateBackground !important border-radius: 10px !important

span
  padding: 10px`

- Chris March

Answer 5

虽然有点晚，但我想回答一下，因为我也遇到了这个问题。由于你看到的选择项是基于隐藏的选择菜单，所以你必须找到紧随其后的 div 元素（由 chosen 创建）并对其进行样式设置。如果你知道它的值，可以使用 Jquery 来实现。

$('.your-select-menu').next().find('.search-choice').each(function() {
  if ($(this).text() === someValue) {
    $(this).css("border-color", "#00b300");
  }
}) 

这里的结果

- Bryan

Answer 6

如果你查看 chosen.css 中的 .chosen-choices，你会发现高度为 auto!important。删除（或注释）那些 !important 即可。

你可以使用浏览器的元素检查器来检查应用的 CSS。我个人每次都使用 Chrome 开发者工具。节省了很多麻烦。

- Joshua H

---

问题是我不想修改chosen.css。 - Lance Shi