如何设置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;
  }

我试着直接写css .chosen-choices ul.有些像border-radius和box-shadow.但其他人:margin, height, padding, border等等被chosen.css文件覆盖.一种选择是!important为每个不起作用的设置.这适用于大多数东西,但仍然不是高度.有什么想法吗？

Answer 1

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

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

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

工作小提琴