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

android - Why am I getting the message 'Youractivity.java is not an activity subclass or alias' -

python - How do I create a list index that loops through integers in another list -

c# - “System.Security.Cryptography.CryptographicException: Keyset does not exist” when reading private key from remote machine -