Bootstrap Vue - 更改下拉菜单的背景颜色

Question

我正在使用Bootstrap Vue插件 - https://bootstrap-vue.js.org/

我需要在下拉菜单中更改默认背景颜色，就像这样。

但是问题在于，当有人点击下拉菜单时，他们会在下拉菜单的包装器中切换“show”类。没有任何新的类来突出显示为红色的div。

我尝试过对.dropdown-toggle类进行样式设置，但它只覆盖了默认样式。有什么解决方法吗？

.dropdown-toggle{
  background-color: #FF5722;
  border-color: #FF5722;
}

Jsfiddle

- Janath

---

尝试为按钮设置样式，而不是使用.dropdown-toggle。 - Annapurna

没有运气，结果相同。 - Janath

.show>.btn-secondary.dropdown-toggle {background-color: #FF5722}请确保您的自定义 CSS 在 buttons.scss 文件样式加载后再加载。 - Annapurna

当有人点击并选择值时，.show类将从div中移除。然后这个功能就可以正常工作了。 - Janath

你的Fiddle => https://jsfiddle.net/o2gqmqzy/1/ - devil

Answer 1

你可以直接在样式中完成。例如：

  <b-form-select
  options="[1, 2, 3]"
  style="background: red">
</b-form-select>

或者创建一个类...

- Ismael Soschinski

Answer 2

  <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="sr-only">Toggle Dropleft</span>

在 btn btn-secondary 的位置更改按钮类别，例如 danger、primary 等。欲知详情，请参阅此链接。

https://getbootstrap.com/docs/4.0/components/dropdowns/

- Shaik