[英]How can I change the arrow on a <select> tag?
我想將帶有選項的標准箭頭更改為svg圖標。 第一個圖像是現在的外觀,第二個圖像是我想要的外觀。 我想為按鈕上的實際圖標設置樣式,而不是單擊后將出現在按鈕下方的選項的樣式。
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>
我以前也想做同樣的事情。 這對我有用。
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;
}
您可以使用svg作為CSS背景圖片,如下所示:
.product-single__variants {
background: url("data:image/svg+xml;utf8,{{ icon.svg | asset_url | replace: '"', "'" }}") no-repeat;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.