newkid101 newkid101 - 6 months ago 49
HTML Question

Bootstrap select menu styling

EDIT:

codepen

I am trying to give my

<select>
menu a custom color and padding. As of now It looks like this:

enter image description here

I am using the bootstrap-select library to do this.

Code:

<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>


CSS

<style type="text/css">
select {
display: block;
margin: 0 auto;
background-color: #2A3F54;
}
</style>


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

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

Comments