Question

我想更改带有svg图标选项的按钮上的标准箭头。第一个图像是它现在的样子，第二个是我希望它看起来的样子。我想在按钮上设置实际图标的样式，而不是单击后在其下面显示的选项的样式。 HTML /液体：＆lt; select name =“id”id =“ProductSelect”class =“product-single__variants”＆gt; {％for product in product.variants％} {％if variant.available％} ＆lt; option {％if variant == product.selected_or_first_available_variant％} selected =“selected”{％endif％} data-sku =“{{variant.sku}}”value =“{{variant.id}}”＆gt; {{variant.title}} - {{variant.price | money_with_currency}}＆lt; / option＆gt; {％else％} ＆lt; option disabled =“disabled”＆gt; {{variant.title}} - {{'products.product.sold_out'| t}} ＆LT; /选项＆GT; {％万一％} {％endfor％} ＆LT; /选择＆GT; SVG文件：＆lt; svg xmlns =“http://www.w3.org/2000/svg”viewBox =“0 0 80 64.57”＆gt;＆lt; title＆gt;资产2＆lt; / title＆gt;＆lt; g id =“Layer_2”数据 - name =“Layer 2”＆gt;＆lt; g id =“Layer_1-2”data-name =“Layer 1”＆gt;＆lt; path d =“M4,36.28H66.34L44.89,57.74a4,4,0， 1,0,5.66,5.66L78.83,35.11h0a4,4,0,0,0，3.5 .61c.07-.1.11-.21.17-.31a3.85,3.85,0,0,0 ,. 2- .37,3.65,3.65,0,0,0，0.13-.41c0-.11.08-.22.1-.33a4,4,0,0,0，0.08-.79h0a4,4,0,0， 0-0.08-.77c0-0.12-0.07-0.23-0.1-.35a3.58,3.58,0,0,0-0.12-.4,4,4,0,0,0-。 21-.4c-0.05-0.1-0.1-0.2-0.16-.29a3.88,3.88,0,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“/＆GT;＆LT; / g取代;＆LT; / g取代;＆LT; / SVG＆GT;

Answer 1

我之前想过同样的事情。这对我有用。

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

Answer 2

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

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

如何更改<select>标签上的箭头？

2 个答案: