如何设置 jquery 所选 select 框的样式

Question

我正在使用为我的 multi-select 盒子选择的 jQuery。但是，我确实发现 chosen.css 文件中预定义的样式有点难以覆盖，完全摆脱 chosen.css 可能也不是一个很好的选择。

这是我的 fiddle： 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>

css:

.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。这适用于大多数东西，但仍然不适用于高度。有什么想法吗？

Answer 1

如果您查看 chosen.css 中的 .chosen-choices，您会发现高度为 auto!important。删除（或评论）那些 !important 应该没问题。

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

Answer 2

CSS will accept style that uses more specified selector.

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

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

Working fiddle

Answer 3

尝试使用 jQuery，这是有效的 JSFIDDLE

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

Answer 4

有点晚了，但我想我会回答，因为我运行对此感兴趣。由于您看到的所选项目基于它隐藏的 select 菜单，因此您必须在紧随其后的 div 中找到该元素（由 chosen 创建）并为其设置样式。假设您知道它的价值，您可以使用 Jquery 来做到这一点。

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

结果

Answer 5

我必须使用：

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

不确定是因为我的版本太旧还是什么。

如何设置 jquery 所选 select 框的样式

How to style jquery chosen select box

css

jquery

jquery-chosen