使用精灵的Html选择标签更改箭头

Question

我有一个选择标记，我想删除箭头并插入另一个用于样式目的;但是，我插入的箭头是一个精灵。如果可能的话，我想将其保留在sprite中以最小化服务器请求。我只需要在chrome中看到示例，然后我就可以将其转换为解决方案的firefox和IE形式。我的尝试在JS Fiddle，代码在下面。

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;
}

我的问题是，除了我插入的向下V形，我不知道如何剪掉精灵的其他部分。任何帮助将不胜感激。

Answer 1

我建议使用垂直精灵而不是水平精灵。

此外，垂直精灵中的每个图像应至少具有select元素的高度。 （在你的例子里他们有）。

然后你可以使用右对齐的垂直精灵。

此外，如果您的精灵中有其他图像，与下拉列表无关，则用于下拉列表的图像部分应与最宽的选择元素一样宽，剩余的空间用透明填充，或任何颜色你想用。 （需要一点猜测/期待）