Bootstrap select menu styling

Question

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>

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?

Answer 1

Change your data-style to btn-new like this:

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

And then style that button like this:

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

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