bootstrap(4)如何修改自定义选择箭头以更改颜色

Question

我正在尝试修改Boostraps custom-selectcss类中使用的箭头.目前它是黑色的,并且更愿意将其更改为灰色,是否有一种简单的方法可以做到这一点？ https://getbootstrap.com/docs/4.0/components/forms/#select-menu

Answer 1

箭头是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示例