在Bootstrap 3中从表单元素中删除箭头 [英] Remove arrows from form element select in Bootstrap 3

问题描述

我想删除右侧的时钟图标旁边显示的向上/向下箭头。这里是图片：

以下是HTML：

 < div class =形式的基团> 
< label class =control-label>日期：< / label> 
< div class =right-inner-addon> 
< i class =glyphicon glyphicon-time>< / i> 
< select class =form-control input-lg> 
< option value =01> 01< / option> 
< option value =02> 02< / option> 
< option value =03> 03< / option> 
< option value =04> 04< / option> 
< option value =05> 05< / option> 
< option value =06> 06< / option> 
< option value =07> 07< / option> 
< / select> 
< / div> 
< / div> 
  

在下面应用建议的css变更后，得出结果：

解决方案

使用外观属性尝试此操作：

外观属性允许您将元素看作标准用户界面元素。

  select.form-control {
 -moz-appearance：none; 
 -webkit-appearance：none; 
外观：无; 
} 
  

I would like to remove the up/down arrows that show up next to the clock icon on right. Here is the image:

Here is the HTML:

<div class="form-group">
    <label class="control-label">Date:</label>
    <div class="right-inner-addon ">
        <i class="glyphicon glyphicon-time"></i>
        <select class="form-control input-lg">
            <option value="01">01</option>
            <option value="02">02</option>
            <option value="03">03</option>
            <option value="04">04</option>
            <option value="05">05</option>
            <option value="06">06</option>
            <option value="07">07</option>
        </select>
    </div>
</div> 

After applying the suggest css change below this is the result:

解决方案

Try this using the appearance property:

The appearance property allows you to make an element look like a standard user interface element.

select.form-control {
  -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
}

这篇关于在Bootstrap 3中从表单元素中删除箭头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！