HTML使用Sprite选择标签更改箭头

Question

I have a select tag that I would like to remove the arrow from and insert a different one for styling purposes; however, the arrow I am inserting is in a sprite. I would like to keep it in the sprite if possible to minimize server requests. I only need to see the example in chrome, and then I can transpose it into the firefox and IE forms of the solution. My attempt is in the JS Fiddle and the code is below.

HTML:

<select id="playerType">
    <option>Human</option>
    <option>Computer</option>
</select>

CSS:

#playerType {
    width: 81px;
    -webkit-appearance: none;
    background: url('http://goo.gl/8jNwT') no-repeat -250px -117px;
}

My problem is that I don't know how to clip off the othre parts of the sprite other than the downwards chevron that I inserted. Any help would be much appreciated.

Answer 1

I would recommend to use a vertical sprite instead of a horizontal one.

Also, each image in the vertical sprite should have at least the height of the select element. (In Your example they have).

Then you can use the vertical sprite right aligned.

Also, if you have other images in your sprite, not related to the dropdown, the image parts intended for the dropdowns should be as wide as your widest select element, the remainder of the space being filled with transparent, or whatever colour you wish to use. (it needs a little guessing/anticipating)