Как добиться мини-стиля выбора с помощью Bootstrap (или прямого CSS)?

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

Последние 2 правила являются необязательными, они сделают <select> похожим на <button>, я также добавил к нему знак вставки. См. эту скрипту.

На всякий случай, если пользователи Bootstrap 3 столкнутся с этим старым вопросом, вот способ BS3:

<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">

Однако ввода-xs нет, поэтому вам придется сделать это самостоятельно, если вы хотите меньше.

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

Для Bootstrap 4 для установки высоты мы можем использовать класс form-control-sm с 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>

И чтобы установить их ширину, мы должны использовать классы столбцов сетки, такие как .col-sm-*, .col-md-*, .col-lg-* и т. д.

Итак, введите код выбора:

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

и это будет выглядеть так:

Вы можете назвать последний элементом выбора "mini".

Это не окончательный ответ, но я хотел поделиться тем, что я получил до сих пор, для всех, кому интересно это сделать.

Как предложил jackwanders, я пошел дальше и создал собственный класс CSS:

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

Эти правила font-size и height более или менее заставляют поле выбора иметь тот же размер, что и мини-кнопка, но текст не совсем выровнен таким же образом (он немного сдвинут вверх). Обратите внимание, что вам нужно использовать height, а не line-height, чтобы переопределить правило height для выбранных элементов, которые Bootstrap устанавливает в другом месте. (Правило width заключается в том, чтобы просто изменить виджет, и он может быть любым, каким вы хотите.)

Мой CSS-фу недостаточно хорош, чтобы быстро заставить мини-выбор полностью соответствовать мини-кнопкам, и, насколько я вижу, выбор ведет себя странно, когда дело доходит до CSS, но, надеюсь, это будет полезно в качестве начала для других. . Между тем, все еще открыты для лучших ответов!

На основе класса btn-xs я подготовил это:

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

Обратите внимание, что ширина не ограничена!

Проверьте эту скрипту, чтобы увидеть ее в действии.

Павел ответит лучше. Но когда курсор мыши находится над кареткой, щелчок не работает. Чтобы это исправить, в класс каретки нужно добавить всего одну вещь:

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