newkid101 newkid101 - 5 months ago 34x
HTML Question

Bootstrap select menu styling



I am trying to give my

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.


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


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

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?


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

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

And then style that button like this:

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

Link to CodePen: