使用精靈Html選擇標籤更改箭頭

我有一個選擇標籤，我想從樣式目的中刪除箭頭並插入另一個標籤;然而，我插入的箭頭是在一個精靈中。如果可能的話，我想保留在精靈中以最大限度地減少服務器請求。我只需要在Chrome中查看示例，然後我可以將它轉換爲解決方案的Firefox和IE窗體。我的嘗試是在JS Fiddle和代碼如下。使用精靈Html選擇標籤更改箭頭

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

我的問題是，我不知道怎麼剪輯又比向下雪佛龍，我插入其他精靈的othre部分。任何幫助將非常感激。

來源

2013-06-25 Ilan Biala

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

此外，垂直精靈中的每個圖像至少應具有select元素的高度。（在你的例子中）。

然後你可以使用垂直精靈右對齊。另外，如果您的精靈中還有其他圖像，與下拉菜單無關，則用於下拉菜單的圖像部分應該與最寬的選擇元素一樣寬，剩餘的空間將填充透明或任何其他內容你想使用的顏色。（它需要一點猜測/預測）

來源

2013-06-25 22:04:08 beerwin

我試圖避免編輯精靈，並試圖找到一個CSS的規則，可以裁剪精靈，一旦我有它的位置。編輯精靈並不理想，因爲精靈中幾乎有100個圖標......你的回答也不是很清楚.. –

你能告訴我我的答案的哪一部分不清楚嗎？ – beerwin

您不能以您希望在選擇元素中的方式裁剪背景圖像。可能的解決方法是使用select元素的javascript實現（使用DOM元素來模擬select的行爲）。 – beerwin

使用精靈Html選擇標籤更改箭頭

回答

相關問題