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

前端之家收集整理的这篇文章主要介绍了如何使用Bootstrap(或直接CSS)实现“迷你”选择风格?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我使用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

猜你在找的Bootstrap相关文章