How to style jquery chosen select box

Question

I am using jQuery chosen for my multi-select box. However, I do find the styles pre-defined in chosen.css file is kind of hard to overwrite, which totally getting rid of chosen.css might also not be a very good option.

Here is my 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;
  }

I tried to directly write the css for .chosen-choices ul. Some works like border-radius and box-shadow. But others: margin, height, padding, border, etc. get overwritten by chosen.css file. One option is to put !important for every setting which doesn't work. This will work for most stuffs but still not the height. Any thoughts?

Answer 1

Try using jQuery, here is the working JSFIDDLE

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

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