How to achieve a "mini" select style using Bootstrap (or straight CSS)?

Question

I'm using Bootstrap's btn-mini class for "mini" buttons and am looking for something analogous to create a "mini" select element, where the select button (i.e. the part you click to show the list of options, not the list of options itself) is the same size and style as a mini button.

When I apply the btn-mini class to a select element, the font style of the select button is the same size as a mini button, but the size of the select button itself is unchanged from the default size.

Is there a different Bootstrap class I should use? Or another way to do it?

P.S. I'm working on OS X Chrome, but naturally hope there is a cross-browser compatible solution.

Answer 1

Just in case any Bootstrap 3 users come across this old question, here's the BS3 way:

<select class="form-control input-lg"></select>
<select class="form-control"></select>
<select class="form-control input-sm"></select>

<input class="form-control input-lg">
<input class="form-control">
<input class="form-control input-sm">

There is no input-xs, though, so you'd have to make that yourself if you wanted smaller.

.input-xs, select.input-xs {
  height: 20px;
  line-height: 20px;
}