如何设置selectpicker的行高

Question

正在尝试通过调整 line-height 来缩小 select 选择器的高度。但是，我不知道如何访问 select 选择器按钮来缩小行高，因为它是动态生成的。这是代码：

<select id="views" class="form-control selectpicker " >
    <option> Sample </option>
</select>

如果我查看检查元素，我可以看到分配行高的按钮：

<div class="btn-group bootstrap-select form-control">
    <button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" role="button" data-id="views" title="all" aria-expanded="false"><span class="filter-option pull-left">all</span>&nbsp;<span class="bs-caret"><span class="caret"></span></span></button>
</div>

before after

Answer 1

解决方案是应用以下 css

#view_group .btn.dropdown-toggle.btn-default{
line-height: 10px
}

这针对特定 div 中选择器的按钮，因此它不会应用于所有选择器

如何设置selectpicker的行高

How to set line-height of selectpicker

javascript

jquery

html

bootstrap-selectpicker