我在下面看到了這篇文章，但沒有幫助，我從上到下閱讀了它，但仍然不明白如何更改 svg 元素的顏色？有很多相互競爭的答案，沒有一個看起來像我正在做的事情。如果你更了解它，也許它會這樣做。但我沒有，這就是我來到這個網站的原因。如果有人能以簡潔明了的方式將我的代碼筆翻譯成其中一個答案，我將不勝感激。
我有一個選擇選單，它使用 svg 圖形作為打開箭頭。已要求在選擇懸停時使 svg 變為綠色并稍微變粗。我已經嘗試通過添加一種沒有運氣的顏色來更改背景 url 屬性，正如我在其他執行緒上所讀到的那樣，但這只會將我的選擇選單更改為綠色。如何更改 svg 箭頭顏色并使其更粗（如果可能）？
我創建了一個codepen https://codepen.io/justinblayney/pen/PoENamE
我嘗試添加另一個圖形，但這并不總是及時加載，我們不想預加載它。
這是我的scss
.find-an-option {
display: grid;
grid-template-columns: 1fr;
select::-ms-expand,
.select:after {
display: none;
content: "";
}
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: url("https://res.cloudinary.com/djk8wzpz4/image/upload/v1647694948/path-arrow_wloczn.svg") center right
30px no-repeat;
border: white 2px solid;
background-color: white;
box-shadow: 0px 3px 6px #00000029;
border-radius: 7px;
font: normal normal bold 16px/18px Arial;
padding: 0px 25px;
&:hover {
border: #242b44 2px solid;
background: url("https://res.cloudinary.com/djk8wzpz4/image/upload/v1647694948/path-arrow_wloczn.svg") center
right 30px no-repeat;
background-color: white;
}
}
}
這是我的html
<form class="find-an-option">
<select id="games" name="games" class="">
<option value="" selected>Games</option>
<option value="" selected>option 1</option>
<option value="" selected>option 2</option>
</select>
</form>
uj5u.com熱心網友回復：
您不能更改background-image.
但是您可以輕松地使用行內的 2 個 svg 作為資料 URL （由 Yoksel 的轉換工具轉換）：
.find-an-option {
display: grid;
grid-template-columns: 1fr;
}
.find-an-option select::-ms-expand,
.find-an-option .select:after {
display: none;
content: "";
}
.find-an-option select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: url("data:image/svg xml,") center right 30px no-repeat;
border: white 2px solid;
background-color: white;
box-shadow: 0px 3px 6px #00000029;
border-radius: 7px;
font: normal normal bold 16px/18px Arial;
padding: 0px 25px;
}
.find-an-option select:hover {
border: #242b44 2px solid;
background: url("data:image/svg xml,") center right 30px no-repeat;
background-color: white;
} <form class="find-an-option">
<select id="games" name="games" class="">
<option value="" selected>Games</option>
<option value="" selected>option 1</option>
<option value="" selected>option 2</option>
</select>
</form>由于您的箭頭/雪佛龍圖示相當小，因此額外的 css“膨脹”應該可以忽略不計。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/451861.html