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

Question

我有一个选择标签，我想从中删除箭头并插入另一个用于样式目的的标签；但是，我插入的箭头在精灵中。如果可能的话，我想将它保留在精灵中以最小化服务器请求。我只需要在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;
}

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

score 0 · Accepted Answer

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

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

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

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

1 回答 1