如何设置jquery选择选择框的样式

Question

我正在使用jQuery框选择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>

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

Should I share types between a Web API service and its client ? What are the other options?

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

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

<强> CSS will accept style that uses more specified selector.

Answer 2

尝试使用jQuery，这是工作JSFIDDLE

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

Answer 3

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

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

Answer 4

我迟到了，但我想我回答了这个问题。由于您看到的所选项目基于它隐藏的选择菜单，因此您必须在紧随其后的div中找到该元素（由所选项创建）并设置样式。你可以用Jquery做到这一点，假设你知道它的价值。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

结果在这

Answer 5

我不得不使用：

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

不确定是不是因为我有一个非常旧的版本还是什么。