bootstrap（4）如何修改自定义选择箭头来更改颜色

问题描述：

我正在尝试修改用于Boostraps custom-select css类的箭头。目前它是黑色的，并希望将其更改为灰色，有没有简单的方法来做到这一点？ https://getbootstrap.com/docs/4.0/components/forms/#select-menu bootstrap（4）如何修改自定义选择箭头来更改颜色

在自举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

非常好，谢谢！ – Yunti

bootstrap（4）如何修改自定义选择箭头来更改颜色

相关推荐