title: Why is my chosen.js loupe icon in the wrong place on Retina screens?
body: <p>I'm using chosen.js on several drop downs on the same page. Turns out, on Retina monitors the loupe sprite in the search field is misplaced (a bunch of X'es and arrows all the way to the left of the input field). The other sprites in the same drop down look OK.</p>
  
  <p>If I open the web inspector in Chrome and try to fiddle with the background I can't seem to move it. Nothing works.</p>
  
  <p>For example:</p>
  
  <pre><code>&lt;div class="foo"&gt;
      &lt;div class="bar"&gt;
          &lt;select class="select1"&gt;
              &lt;option value="1"&gt;Pick me!&lt;/option&gt;
              &lt;option value="1"&gt;Pick me!&lt;/option&gt;
              &lt;option value="1"&gt;Pick me!&lt;/option&gt;
              &lt;option value="1"&gt;Pick me!&lt;/option&gt;
          &lt;/select&gt;
      &lt;/div&gt;
      &lt;div class="baz"&gt;
          &lt;select class="select2"&gt;
              &lt;option value="2"&gt;Pick me!&lt;/option&gt;
              &lt;option value="2"&gt;Pick me!&lt;/option&gt;
              &lt;option value="2"&gt;Pick me!&lt;/option&gt;
              &lt;option value="2"&gt;Pick me!&lt;/option&gt;
          &lt;/select&gt;
  &lt;/div&gt;
  
  .bar input {
      background: #fff !important;
  }
  </code></pre>
  
  <p>Notice how the icon in the search field in the first <code>select</code> is screwed up.</p>
  
  <p><a href="https://jsfiddle.net/uv7rt52o/1/" rel="nofollow">Here's a fiddle that demonstrates the problem</a>.</p>
  
  <p>Any input is greatly appreciated.</p>