title: How to style jquery chosen select box
body: <p>I am using <code>jQuery</code> chosen for my <code>multi-select</code> box. However, I do find the styles pre-defined in <code>chosen.css</code> file is kind of hard to overwrite, which totally getting rid of <code>chosen.css</code> might also not be a very good option. </p>
  
  <p>Here is my fiddle: 
  <a href="https://jsfiddle.net/k1Lr0342/">https://jsfiddle.net/k1Lr0342/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;select class="chosen" multiple="true" style="height: 34px; width: 280px"&gt;
    &lt;option&gt;Choose...&lt;/option&gt;
    &lt;option&gt;jQuery&lt;/option&gt;
    &lt;option selected="selected"&gt;MooTools&lt;/option&gt;
    &lt;option&gt;Prototype&lt;/option&gt;
    &lt;option selected="selected"&gt;Dojo Toolkit&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>css: </p>
  
  <pre><code>.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;
    }
  </code></pre>
  
  <p>I tried to directly write the css for <code>.chosen-choices</code> <code>ul</code>. Some works like <code>border-radius</code> and <code>box-shadow</code>. But others: <code>margin, height, padding, border</code>, etc. get overwritten by <code>chosen.css</code> file. One option is to put <code>!important</code> for every setting which doesn't work. This will work for most stuffs but still not the height. Any thoughts? </p>