Why is my chosen.js loupe icon in the wrong place on Retina screens?

Question

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.

If I open the web inspector in Chrome and try to fiddle with the background I can't seem to move it. Nothing works.

For example:

<div class="foo">
    <div class="bar">
        <select class="select1">
            <option value="1">Pick me!</option>
            <option value="1">Pick me!</option>
            <option value="1">Pick me!</option>
            <option value="1">Pick me!</option>
        </select>
    </div>
    <div class="baz">
        <select class="select2">
            <option value="2">Pick me!</option>
            <option value="2">Pick me!</option>
            <option value="2">Pick me!</option>
            <option value="2">Pick me!</option>
        </select>
</div>

.bar input {
    background: #fff !important;
}

Notice how the icon in the search field in the first select is screwed up.

Here's a fiddle that demonstrates the problem .

Any input is greatly appreciated.

Answer 1

This happened because I had another rule defined like this:

.some-parent input {
    background: #fff !important;
}

where .some-parent is a distant ancestor of my drop down. This rule would put the Retina background rules in chosen.js out of play since they're defined with single rules ( background-image , background-repeat etc).

The solution is to either get rid of the old rule or redefine the chosen.js rule in one line. If anyone is interested, this is how it's done:

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi) {
    .chosen-container .chosen-search input[type="text"] {
        background: image-url('/static_assets/chosen/chosen-sprite@2x.png') 100% -20px / 52px 37px no-repeat scroll #fff !important;
    }
}