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

原文由 Lance Shi 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

CSS 将接受使用更多指定选择器的样式。

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

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

工作小提琴

原文由 blurfx 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

对于那些感兴趣的人，这是我制定的一些 sass，它将为所选选择框设置样式，最大的问题是它使用背景而不是背景颜色，这就是它忽略你的 css 颜色的原因`.chosen-drop border-bottom-左半径：10px 边框右下半径：10px

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

.chosen-select 选项显示：无

.chosen-container 宽度：100% !important

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

li.search-choice 颜色: \(text !important 背景: \)alternateBackground !important 边框半径: 10px !important

 span
  padding: 10px`

原文由 Chris March 发布，翻译遵循 CC BY-SA 4.0 许可协议