我正在尝试修改Boostrap custom-select css类中使用的箭头。目前它是黑色的,希望将其更改为灰色,有简单的方法吗?https://getbootstrap.com/docs/4.0/components/forms/#select-menu
custom-select
knsnq2tg1#
箭头是用作背景图像的SVG。您只需要通过指定填充颜色(下面的重要部分是您在fill='something'中输入的内容),用您自己的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") }
Example
pqwbnv8z2#
要将黑色更改为白色,请使用以下方法,并根据需要更改背景颜色#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; }
2条答案
按热度按时间knsnq2tg1#
箭头是用作背景图像的SVG。您只需要通过指定填充颜色(下面的重要部分是您在
fill='something'
中输入的内容),用您自己的CSS覆盖它。例如:
Example
pqwbnv8z2#
要将黑色更改为白色,请使用以下方法,并根据需要更改背景颜色#272a3d