在 Bootstrap 中更改组合框胡萝卜图标大小答案

【问题标题】：Change Combobox Carrot Icon Size in Bootstrap在 Bootstrap 中更改组合框胡萝卜图标大小
【发布时间】：2017-10-12 20:24:10
【问题描述】：

我使用 bootstrap 3 框架创建了一个简单的表单。现在我想从选择框中增加组合框胡萝卜图标（如图所示）的大小。

这是我的代码

<div class="col-sm-6">
    <select class="form-control input-lg" id="">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
    </select>
</div>

我该如何改变这个？

【问题讨论】：

标签： html twitter-bootstrap forms

【解决方案1】：

使用以下 css 属性：

 select {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      /* Some browsers will not display the caret when using calc, so we put the fallback first */ 
      background: url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") white no-repeat 98.5% !important; /* !important used for overriding all other customisations */
      background: url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") white no-repeat calc(100% - 10px) !important; /* Better placement regardless of input width */
    }

【讨论】：

它适用于乔希。但我只想更改图标。使用您的代码时，灰色边框变为透明..
好的，那就只使用背景属性。
我试过了。但它填满了整个区域。的选择列表。无论如何感谢您的回复。我正在等待一些答复。如果我没有得到任何回应，我会批准你的回答。