bootstrap（四）如何修改自定义选择箭头改变颜色答案

【问题标题】：bootstrap (4) How to amend custom select arrow to change colourbootstrap（四）如何修改自定义选择箭头改变颜色
【发布时间】：2017-10-19 18:17:09
【问题描述】：

我正在尝试修改 Boostraps custom-select css 类中使用的箭头。目前它是黑色的，希望将其更改为灰色，有没有简单的方法可以做到这一点？ https://getbootstrap.com/docs/4.0/components/forms/#select-menu

【问题讨论】：

Bootstrap 4 自定义选择中的箭头是data: 类中data: 背景图像的一部分，因此您不能直接更改颜色。您必须删除/替换该背景。

标签： twitter-bootstrap bootstrap-4

【解决方案1】：

箭头是用作背景图像的 SVG。你只需要通过指定填充颜色来用你自己的 CSS 覆盖它（下面的重要部分是你在fill='something' 中输入的内容）。

例如：

.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

【讨论】：

对于填充，您可以使用 rgb 作为，十六进制不起作用 fill='rgb(0,162,221)'

【解决方案2】：

将黑色更改为白色，如下所示并根据需要更改背景颜色#272a3d

.custom-select {
  background: #272a3d url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='white' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right .75rem center/8px 10px !important;
}

【讨论】：