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

Twitter bootstrap 引导(4)如何修改自定义选择箭头以更改颜色,twitter-bootstrap,bootstrap-4,Twitter Bootstrap,Bootstrap 4,我正试图修改Bootraps自定义选择css类中使用的箭头。目前它是黑色的,希望将其改为灰色,有没有简单的方法? 箭头是用作背景图像的SVG。你只需要通过指定填充颜色来覆盖它,下面的重要部分就是你在fill='something'中输入的内容 例如: .custom-select { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBo

我正试图修改Bootraps自定义选择css类中使用的箭头。目前它是黑色的,希望将其改为灰色,有没有简单的方法?

箭头是用作背景图像的SVG。你只需要通过指定填充颜色来覆盖它,下面的重要部分就是你在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")
}

要将黑色更改为白色,请按如下所示使用,并根据需要更改背景色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;
}

Bootstrap 4 custom select中的箭头是.custom select类中数据:背景图像的一部分,因此不能直接更改颜色。您必须删除/替换该背景。对于填充,您可以使用rgb as,hexs无法使用fill='RGB0162221'