Html 如何更改a上的箭头<；选择>；标签？

我想将带有选项的按钮上的标准箭头更改为svg图标。第一张图片是它现在的样子，第二张是我希望它的样子。我想样式的按钮上的实际图标，而不是样式的选项，将出现在它点击后

HTML/Liquid：

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

{product.variants%中的变量为%0}
{%if variant.available%}
{{variant.title}}-{{variant.price}货币}
{%else%}
{{variant.title}}-{{'products.product.salled|t}
{%endif%}
{%endfor%}

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>

资产2

我以前也想做同样的事情。这是对我有用的东西

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

---

我以前也想做同样的事。这是对我有用的东西

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

---

您可以使用svg作为css背景图像，如下所示：

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

---

您将需要使用自定义下拉库，因为HTML在这一点上不是完全可自定义的。问题的可能重复是关于

，但正如公认的答案所解释的，它适用于整个

。您将需要使用自定义下拉库，因为HTML在这一点上不是完全可定制的。问题的可能重复是关于

，但正如公认的答案所解释的，它适用于整个

。