HTML使用Sprite選擇標簽更改箭頭

Question

我有一個選擇標記，我想從中刪除箭頭，然后插入另一個標記來進行樣式設置； 但是，我要插入的箭頭是精靈。 我想盡可能將其保留在sprite中，以最大程度地減少服務器請求。 我只需要在chrome中查看示例，然后就可以將其轉換為解決方案的Firefox和IE形式。 我的嘗試是在JS小提琴中 ，下面是代碼。

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

我建議使用垂直精靈而不是水平精靈。

同樣，垂直精靈中的每個圖像都應至少具有選擇元素的高度。 （在您的示例中，他們擁有）。

然后，您可以使用垂直對齊的精靈。

另外，如果子畫面中還有其他與下拉菜單無關的圖像，則用於下拉菜單的圖像部分應與最寬的選擇元素一樣寬，其余空間將被透明填充，或者您希望使用任何顏色采用。 （需要一些猜測/期待）