如何使用Bootstrap(或直接CSS)实现“迷你”选择风格？

发布时间：2020-12-18 00:09:35 所属栏目：安全来源：网络整理

导读：我使用Bootstrap的btn-mini类的“迷你”按钮，并寻找类似于创建一个“迷你”选择元素的东西，其中选择按钮(即你点击的部分显示选项列表，而不是列表选项本身)与迷你按钮的大小和样式相同。当我将btn-mini类应用于select元素时，选择按钮的字体样式与mini按

我使用Bootstrap的btn-mini类的“迷你”按钮，并寻找类似于创建一个“迷你”选择元素的东西，其中选择按钮(即你点击的部分显示选项列表，而不是列表选项本身)与迷你按钮的大小和样式相同。

当我将btn-mini类应用于select元素时，选择按钮的字体样式与mini按钮的大小相同，但是选择按钮本身的大小与默认大小没有变化。

有没有不同的Bootstrap类我应该使用？还是另一种方法呢？

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

解决方法

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&gt ;,我还添加了一个插入符号。见这fiddle。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!