调整Bootstrap 4 Dropdown插入尺寸

Question

我在我的html页面中使用Bootstrap v4框架。现在我想在我的下拉列表中调整大小或增加插入符号大小。有谁知道怎么做？

这是我的代码

<div class="container">  
<form name="books">
    <div class="form-group">
    <select class="form-control" style="height:3rem">
        <option>Select Category</option>
        <option value="1">Tamil</option>
        <option value="2">English</option>
        <option value="3">Mathematics</option>
        <option value="4">Science</option>
    </select>
    </div>
</form>
</div>

Answer 1

为了做到这一点，只需增加边框的大小

.dropdown-toggle::after {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: .3em;
    vertical-align: middle;
    content: "";
    border-top: .5em solid;
    border-right: .5em solid transparent;
    border-left: .5em solid transparent;
}

Answer 2

试试这个css

-webkit-appearance: none;禁用默认插入符并将其添加为背景图像。

＆＃13;

＆＃13;

 select.form-control{
    background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right #fff;
    -webkit-appearance: none;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">  
<form name="books">
    <div class="form-group">
    <select class="form-control" style="height:3rem">
        <option>Select Category</option>
        <option value="1">Tamil</option>
        <option value="2">English</option>
        <option value="3">Mathematics</option>
        <option value="4">Science</option>
    </select>
    </div>
</form>
</div>

＆＃13;

＆＃13;

＆＃13;