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

working fiddle


Comments

Popular posts from this blog

sql - VB.NET Operand type clash: date is incompatible with int error -

SVG stroke-linecap doesn't work for circles in Firefox? -

python - TypeError: Scalar value for argument 'color' is not numeric in openCV -