bootstrap（4）色を変更するためにカスタム選択矢印を修正する方法

Question

私はBoostraps custom-select cssクラスで使用される矢印を修正しようとしています。現在、それは黒で、これを灰色に変更したいと考えています。これを行う簡単な方法はありますか？ https://getbootstrap.com/docs/4.0/components/forms/#select-menu

Answer 1

矢印は背景画像として使用されているSVGです。塗りつぶしの色を指​​定して、あなた自身のCSSでそれを上書きするだけです（下の重要な部分はfill='something'に入力したものです）。例えば

： `.custom-SELECT`クラスで`背景画像、だから：

.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