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?
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 */
}