如何使用Bootstrap（或纯CSS）实现“迷你”选择样式？

Question

我正在使用Bootstrap的btn-mini类创建“迷你”按钮，并正在寻找类似的方法来创建“迷你”选择元素，其中选择按钮（即单击以显示选项列表的部分，而不是选项列表本身）与迷你按钮具有相同的大小和样式。

当我将btn-mini类应用于选择元素时，选择按钮的字体样式与迷你按钮的大小相同，但选择按钮本身的大小仍然保持默认大小。

是否有其他Bootstrap类可供使用？或者有其他的方法吗？

P.S. 我在OS X Chrome上工作，但自然希望有跨浏览器兼容的解决方案。

- Ghopper21

---

如果你想要缩小一个选择菜单，你只需要调整字体大小，或许加一点填充来使它更易读。 - jackwanders

@jackwanders -- 这似乎不够。Bootstrap CSS 类 btn-mini 包括一个 font-size 调整。当应用于 select 时，该类会使字体大小变小，但不会缩小框的大小。 - Ghopper21

这是因为 .btn-mini 还包括行高和填充的规则。.btn-mini 不是为 select 元素设计的。最好自己制作一个类。请参见此演示以了解我所说的内容：http://jsfiddle.net/jackwanders/NQPBW/ - jackwanders

将CSS和HTML复制到您的问题中，我相信很快就会有人回答。 - Noah Clark

@jackwanders -- 嗯，选择框在 fiddle 中会缩小到字体的大小，但使用 Bootstrap 就不会了。看起来 Bootstrap 无论字体大小都会固定选择框的高度... - Ghopper21

好的，明白了。Bootstrap的CSS确实在各个地方设置了选择器的height和line-height。因此，显式地将它们都设置为我想要的值就可以了。 - Ghopper21

Answer 1

如果有任何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">

不过，没有input-xs，如果您想要更小的输入框，您需要自己创建。

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

- Will Stern

---

如果选择的大小大于1，则此情况不起作用，它应该减小文本大小和填充。 - Pablo Pazos

Answer 2

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

最后两个规则是可选的，它将使<select>看起来像<button>，我还添加了一个小三角形。见此处。

- Pavlo

---

很好！将外观更改为按钮，并应用新的 select.btn-mini 规则是使其看起来一致的关键。现在，对于下拉箭头，有什么建议吗？ - Ghopper21

这太棒了，应该作为默认的Bootstrap的一部分包含进来。谢谢！ - Clay

刚在 MacBook Pro 上的 Firefox （20 多个版本）上检查了一下。我在 JS Fiddle 中看到的是一个带有两个下拉三角形（caret）的选择框。这是一个不错的概念，但似乎有点奇怪。可能是我的机器的问题。 - Ace

@Ace 看起来 -moz-appearance 在 Firefox 20（以及可能更早的版本）上没有效果。非标准属性果然是有害的。我会考虑如何修改这个答案。 - Pavlo

Answer 3

对于 Bootstrap 4，要设置 高度，我们可以使用带有 form-control 类的 form-control-sm 类。

<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"选择元素。

- Rajkaran Mishra

---

好的，已测试：<select class="custom-select custom-select-sm"> 也可以正常工作。太棒了！ - JonSnow

Answer 4

这不是最终答案，但我想分享一下我已经得到的内容，供其他对此感兴趣的人参考。

正如jackwanders建议的那样，我已经创建了一个自定义CSS类：

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

这个font-size和height规则基本上使得选择框的大小与迷你按钮相同，但文本并没有以相同的方式对齐（它稍微向上偏移了）。请注意，您需要使用height而不是line-height来覆盖Bootstrap在其他地方设置的选择元素的height规则。（width规则只是为了更改小部件，可以是任何您想要的宽度。）

我的CSS技巧还不够好，无法快速使迷你选择框看起来完全与迷你按钮一致，并且从我所看到的内容来看，选择框在处理CSS时表现出奇怪的行为，但希望这对其他人有所帮助。同时，仍然期待更好的答案！

- Ghopper21

Answer 5

Pavlo的回答更好。但是当鼠标光标悬停在插入符上时，点击操作不起作用。只需要添加一个东西到插入符类中就可以解决这个问题：

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

- EminST

Answer 6

基于 btn-xs 类，我已经准备好了这个：

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

请注意宽度没有限制！

请查看这个fiddle以查看其实际效果。

- 1_bug