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.

if you want to shrink a select menu, you need only adjust the `font-size`, and perhaps add a bit of padding to make it more legible — jackwanders, Aug 27 '12 at 20:37
@jackwanders -- that doesn't seem to be enough. The Bootstrap CSS class `btn-mini` includes a `font-size` adjustment. When applied to a select, the class makes the font size smaller, but without shrinking the box size down. — Ghopper21, Aug 27 '12 at 20:39
that's because `.btn-mini` also includes rules for line-height and padding. `.btn-mini` wasn't designed to be used with `select` elements. You're better off making your own class. See this demo to see what I'm talking about: http://jsfiddle.net/jackwanders/NQPBW/ — jackwanders, Aug 27 '12 at 20:44
Copy the css and HTML into your question, and I'm sure someone will be along briefly with the answer. — Noah Clark, Aug 27 '12 at 20:45
@jackwanders -- hmmm, the select box shrinks to the size of the font in the fiddle, but not with Bootstrap. Seems like Bootstrap is fixing the height of selects regardless of the font size... — Ghopper21, Aug 27 '12 at 21:59
Ok, got it. Bootstrap's CSS indeed sets both the `height` and `line-height` of selects in various places. So explicitly setting both to what I want works. — Ghopper21, Aug 27 '12 at 22:02

Will Stern · Answer 1 · 2014-04-15T16:47:47.863

62

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;
}

edited Apr 15 '14 at 16:47

answered Dec 19 '13 at 21:57

Will Stern

17,181
5
36
22

Doesnt work if select size > 1 for this case what it should do is reduce the text size and padding. – Pablo Pazos Jan 11 '16 at 04:11

score 33 · Accepted Answer · edited Jun 20 '20 at 09:12

33

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.

edited Jun 20 '20 at 09:12

Community

1
1

answered Aug 28 '12 at 12:50

Pavlo

43,301
14
77
113

That's nice! Changing the appearance to a button, together with the application of the new `select.btn-mini` rule is what makes it look consistent. Now, for the caret, any tips on how to do that? – Ghopper21 Aug 28 '12 at 13:05
This is awesome and should be included as part of the default Bootstrap. Thank you! – Clay Dec 14 '12 at 16:40
2

Just checked this on Firefox (20-something) on a MacBook Pro. What I see in the JS Fiddle is a select with two drop-down triangles (caret). Nice concept, though, just seems a bit odd. Must be my machine. – Ace Apr 24 '13 at 20:54
@Ace Looks like `-moz-appearance` has no effect on Firefox 20 (and probably earlier). Non-standard properties are evil after all. I will think how to modify this answer. – Pavlo Apr 25 '13 at 07:14

score 12 · Answer 3 · answered Aug 17 '17 at 12:47

For Bootstrap 4, to set height we can use form-control-sm class with form-control.

<select class="form-control form-control-lg">
  <option>Large select</option>
</select>
<select class="form-control">
  <option>Default select</option>
</select>
<select class="form-control form-control-sm">
  <option>Small select</option>
</select>

And to set width of these we have to use grid column classes like .col-sm-*, .col-md-*, .col-lg-*, etc.

So put the select code in:

<div class="row">
  <div class="col-md-3">
    ... select tag code ...
  </div>
</div>

and it will look like this:

You can call the last one a "mini" select element.

Ghopper21 · Answer 4 · 2012-08-28T12:50:22.007

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.)

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!

score 0 · Answer 5 · answered Mar 03 '17 at 11:28

0

Based on btn-xs class I've prepared this:

.input-xs{
    height: 20px;
    line-height: 1.5;
    font-size: 12px;
    padding: 1px 5px;
    border-radius: 3px;
}

Note that width is not limited!

Please check this fiddle to see it in action.

answered Mar 03 '17 at 11:28

1_bug

5,505
4
50
58

score 0 · Answer 6 · answered Feb 25 '18 at 13:20

0

Pavlo answer is better. But when mouse cursor is over caret click doenst` work. Just one thing must be added into caret class to fix it:

select.btn-mini + .caret {
    margin-left: -14px;
    margin-top: 19px;
 pointer-events: none;
}

answered Feb 25 '18 at 13:20

EminST

59
5

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

6 Answers6

HTML

CSS