Bootstrap 3 dropdown select
We just switched our site to bootstrap 3 and we have a bunch of forms...wasn't fun but once you get the hang it's not too bad.
Is this what you are looking for? Demo Here
<div class="form-group">
<label class="control-label col-sm-offset-2 col-sm-2" for="company">Company</label>
<div class="col-sm-6 col-md-4">
<select id="company" class="form-control">
<option>small</option>
<option>medium</option>
<option>large</option>
</select>
</div>
</div>
If you want to achieve this just keep you dropdown button and style it like the select box. The code is here and below.
.btn {
cursor: default;
background-color: #FFF;
border-radius: 4px;
text-align: left;
}
.caret {
position: absolute;
right: 16px;
top: 16px;
}
.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open .dropdown-toggle.btn-default {
background-color: #FFF;
}
.btn-group.open .dropdown-toggle {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6)
}
.btn-group {width: 100%}
.dropdown-menu {width: 100%;}
To make the button work like a select box, all you need to add is this tiny javascript code:
$('.dropdown-menu a').on('click', function(){
$('.dropdown-toggle').html($(this).html() + '<span class="caret"></span>');
})
If you have multiple custom dropdowns like this you can use this javascript code:
$('.dropdown-menu a').on('click', function(){
$(this).parent().parent().prev().html($(this).html() + '<span class="caret"></span>');
})