如何更改<select>標籤上的箭頭？

我想改變一個按鈕上的標準箭頭與選項到一個SVG圖標。第一張照片是現在的樣子，第二張照片是我想要的樣子。我想要設置按鈕上的實際圖標的樣式，而不是一旦點擊它下面出現的選項樣式。如何更改<select>標籤上的箭頭？

HTML /液體：

<select name="id" id="ProductSelect" class="product-single__variants"> 
    {% for variant in product.variants %} 
    {% if variant.available %} 
     <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option> 
    {% else %} 
     <option disabled="disabled"> 
     {{ variant.title }} - {{ 'products.product.sold_out' | t }} 
     </option> 
    {% endif %} 
    {% endfor %} 
</select>

SVG文件：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 64.57"><title>Asset 2</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path d="M4,36.28H66.34L44.89,57.74a4,4,0,1,0,5.66,5.66L78.83,35.11h0a4,4,0,0,0,.5-.61c.07-.1.11-.21.17-.31a3.85,3.85,0,0,0,.2-.37,3.65,3.65,0,0,0,.13-.41c0-.11.08-.22.1-.33a4,4,0,0,0,.08-.79h0a4,4,0,0,0-.08-.77c0-.12-.07-.23-.1-.35a3.58,3.58,0,0,0-.12-.4,4,4,0,0,0-.21-.4c-.05-.1-.1-.2-.16-.29a3.88,3.88,0,0,0-.5-.61L50.54,1.17a4,4,0,1,0-5.66,5.66L66.34,28.28H4a4,4,0,0,0,0,8Z"/></g></g></svg>

來源

2017-02-14 S. Miller

您將需要使用自定義的下拉列表庫，因爲HTML '，正如接受的答案所解釋的那樣。 –

您可以使用SVG作爲一個CSS背景圖像像這樣：

.product-single__variants { 
background: url("data:image/svg+xml;utf8,{{ icon.svg | asset_url | replace: '"', "'" }}") no-repeat; 
}

來源

2017-02-15 00:33:05 Buts

我想之前同樣的事情。這是爲我工作的。

select-dropdown { 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    text-indent: 1px; 
    text-overflow: ''; 
    background: url('path/to/file.jpg') no-repeat right center !important; 
    background-color: white !important; 
}

來源

2017-02-14 19:59:33 TheDarkKnight

如何更改<select>標籤上的箭頭？

回答

相關問題