bootstrap（4）如何修改自定義選擇箭頭來更改顏色

我正在嘗試修改用於Boostraps custom-select css類的箭頭。目前它是黑色的，並希望將其更改爲灰色，有沒有簡單的方法來做到這一點？ https://getbootstrap.com/docs/4.0/components/forms/#select-menu bootstrap（4）如何修改自定義選擇箭頭來更改顏色

來源

2017-10-19 Yunti

在自舉4自定義選擇中的箭頭是一個'數據的一部分：'背景圖像中的'.custom-select'類，所以你不能直接改變顏色。你將不得不刪除/替換該背景。 –

箭頭是SVG被用作背景圖像。您只需要通過指定填充顏色（下面的重要部分是您在fill='something'中輸入的內容）使用自己的CSS覆蓋它。

例如：

.custom-select { 
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='red' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") 
}

Bootply example

來源

2017-10-19 18:31:44 j08691

非常好，謝謝！ – Yunti

bootstrap（4）如何修改自定義選擇箭頭來更改顏色

回答

相關問題