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

Showing 1-6 of 6 messages
How to achieve a "mini" select style using Bootstrap (or straight CSS)? Ghopper21 via StackOverflow 8/27/12 1:37 PM

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 box (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 box, the font style of the selected item is shown in the same size as a mini button, but the size of the box 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.



Please DO NOT REPLY directly to this email but go to StackOverflow:
http://stackoverflow.com/questions/12149164/how-to-achieve-a-mini-select-style-using-bootstrap-or-straight-css
How to achieve a "mini" select style using Bootstrap (or straight CSS)? Pavlo Mykhalov via StackOverflow 8/27/12 1:42 PM

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.

How to achieve a "mini" select style using Bootstrap (or straight CSS)? Pavlo Mykhalov via StackOverflow 8/28/12 5:42 AM

This is not a final answer, but I wanted to share what I've gotten so far for anyone else curious about doing this.

As suggested by jackwanders, I've gone ahead and created a custom CSS class:

.select-mini {
  font-size: 11px;
  height: 20px;
  width: 100px;
}

This font-size and height rules more or less get the select box to be the same size as a mini button, but the text isn't quite aligned in the same way (it's slightly shifted up). The width rule is just to change the widget and can be whatever you want.

My CSS-fu isn't good enough to quickly make the mini select look fully consistent with the mini buttons, and from what I can see select's behave oddly when it comes to CSS anyhow, but hopefully this will be helpful as a start to others. Meanwhile, still open to better answers!



Please DO NOT REPLY directly to this email but go to StackOverflow:
http://stackoverflow.com/questions/12149164/how-to-achieve-a-mini-select-style-using-bootstrap-or-straight-css/12159464#12159464
How to achieve a "mini" select style using Bootstrap (or straight CSS)? Pavlo Mykhalov via StackOverflow 8/28/12 5:52 AM

This is not a final answer, but I wanted to share what I've gotten so far for anyone else curious about doing this.

As suggested by jackwanders, I've gone ahead and created a custom CSS class:

.select-mini {
  font-size: 11px;
  height: 20px;
  width: 100px;
}

This font-size and height rules more or less get the select box to be the same size as a mini button, but the text isn't quite aligned in the same way (it's slightly shifted up). Note you need to use height not line-height to override a height rule for select elements that Bootstrap sets elsewhere. (The width rule is just to change the widget and can be whatever you want.)

How to achieve a "mini" select style using Bootstrap (or straight CSS)? Pavlo Mykhalov via StackOverflow 8/28/12 5:52 AM

HTML

<select class="btn btn-mini">

CSS

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

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

The last rule is optional, it will make <select> look like <button>, but you may want to add a caret to it. See this fiddle.



Please DO NOT REPLY directly to this email but go to StackOverflow:
http://stackoverflow.com/questions/12149164/how-to-achieve-a-mini-select-style-using-bootstrap-or-straight-css/12159615#12159615
How to achieve a "mini" select style using Bootstrap (or straight CSS)? Pavlo Mykhalov via StackOverflow 8/28/12 9:12 AM

HTML

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

CSS

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

/* this one 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 rule is optional, it will make <select> look like <button>, I've also added a caret to it. See this fiddle.