引导程序选择菜单样式 [英] Bootstrap select menu styling

问题描述

我正在尝试为我的<select>菜单自定义颜色和填充.截至目前，它看起来像这样:

I am trying to give my <select> menu a custom color and padding. As of now, It looks like this:

select {
  display: block;
  margin: 0 auto;
  background-color: #2A3F54;
}

<select name="ad_account_selected" onchange="this.form.submit()" class="selectpicker" data-style="btn-primary">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

我要在菜单和左侧之间留一个小空隙，并为其添加边栏的颜色(在上面的菜单周围可以看到).但是，按钮保持默认颜色，即使我添加padding-left: 20px菜单也停留在左侧.有帮助吗?

I want a small gap between the menus and the left side and give it the color of my sidebar ( seen around the menu above ). However, the button remains in the default color and even if I add padding-left: 20px the menu is stuck to the left side. Any help?

推荐答案

像这样将data-style更改为btn-new:

<select data-style="btn-new">
    ....
</select>

然后按如下所示设置该按钮的样式:

And then style that button like this:

.btn-new {
    background-color: #2A3F54;
}

链接到CodePen: http://codepen.io/anon/pen/pyBjrr

Link to CodePen: http://codepen.io/anon/pen/pyBjrr

这篇关于引导程序选择菜单样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！