在Bootstrap中更改Combobox胡萝卜图标大小

Question

我使用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>

我怎么能改变这个？

Answer 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 */
    }