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

css, twitter-bootstrap, twitter-bootstrap-2

Solution

HTML

<select class="btn btn-mini">
    <!-- options -->
</select>
<span class="caret"></span>

CSS

select.btn-mini {
    height: auto;
    line-height: 14px;
}

/* this is optional (see below) */
select.btn {
    -webkit-appearance: button;
       -moz-appearance: button;
            appearance: button;
    padding-right: 16px;
}

select.btn-mini + .caret {
    margin-left: -20px;
    margin-top: 9px;
}

The last 2 rules are optional, it will make `<select>` look like `<button>`, I've also added a caret to it. See this fiddle.

Problem

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.

Original source