相关疑难解决方法(0)

我想从HTML <select>元素中删除下拉箭头.例如:

<select style="width:30px;-webkit-appearance: none;">
    <option>2000</option>
    <option>2001</option>
    <option>2002</option>
    ...
</select>

如何在Opera,Firefox和Internet Explorer中完成？

我有选择元素,我想删除箭头,然后我可以添加其他图标..我可以为Firefox Safari和Chrome做到这一点,但这在IE9上不起作用.

.styled-select select 
{
    border: 0 !important;  /*Removes border*/
    -webkit-appearance: none;  /*Removes default chrome and safari style*/
    -moz-appearance: none;  /*Removes default style Firefox*/
    background: url('select_icon.png')  no-repeat;
     background-position: 179px 7px;
     text-indent: 0.01px;
     text-overflow: "";
     color: #FCAF17;
     width:200px;
 }

查阅小提琴上的IE9.所有我需要的是移除ie9中的箭头请JSFIDDLE回答.

<select>在Bootstrap 3中设置表单元素样式时,它会在OS X上的Firefox中呈现一个丑陋的按钮:

(http://bootply.com/98385)

这显然是一段时间已知的问题,并且有许多黑客和解决方法,其中没有一个非常干净(https://github.com/twbs/bootstrap/issues/765).我想知道除了使用Bootstrap下拉列表或额外的插件之外,是否有人找到了解决此问题的良好解决方案.我故意选择使用HTML <select>而不是Bootstrap下拉菜单,因为移动设备上的长列表可用性更好.

这是Firefox问题还是Bootstrap问题？

详细信息:Mac OS X 10.9,Firefox 25.0.1

2013年12月4日更新:我对每个浏览器如何<select>使用Firefox,Chrome和Safari 呈现OS X 10.9以及@zessx(使用http://bootply.com)进行了并排比较/ 98425).显然,<select>在浏览器和操作系统之间呈现表单元素的方式有很大差异:

我理解<select>标签的处理方式与您使用的操作系统不同,因为有基于操作系统的本机控件可以指示样式和行为.但是,class="form-control"在Bootstrap中它是什么导致<select>表单元素在Firefox中看起来不同？为什么<select>在Firefox中默认的,未设置样式看起来没问题,但是一旦它被设置样式,它看起来很难看？

DEMO

我试过css appearance: none;来隐藏选择下拉箭头.但在IE9箭头显示.供参考,请参阅图像.

知道如何使用css或jquery隐藏箭头吗？

这是我的代码:

    .fields-set select{
height:32px;
border:1px solid #ccc;
margin: 0 19px 0 1%;
padding:0 32px 0 1%;
width:55%;
float: left;
overflow: hidden;
background:url("https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR3xT6PSVebCcTYjggESCb55GBM91fGgbyrMFbs3CGeFoQjFwVB") no-repeat scroll right center padding-box border-box #FFF;
box-shadow: none;
-webkit-appearance: none;
   -moz-appearance: none;
        appearance: none;
    -ms-appearance: none  \9;
     -o-appearance: none;
    }