css - How to style jquery chosen select box -
i using jquery
chosen multi-select
box. however, find styles pre-defined in chosen.css
file kind of hard overwrite, totally getting rid of chosen.css
might not option.
here 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 directly write css .chosen-choices
ul
. works border-radius
, box-shadow
. others: margin, height, padding, border
, etc. overwritten chosen.css
file. 1 option put !important
every setting doesn't work. work stuffs still not height. thoughts?
css accept style uses more specified selector.
.chosen-container-multi .chosen-choices { /*blah blah*/ } .chosen-choices { /* less specificity, style might not work */ }
Comments
Post a Comment