select删除下拉箭头
我想从html中select删除下拉箭头。 例如
<select style="width:30px;-webkit-appearance: none;"> <option>2000</option> <option>2001</option> <option>2002</option> ... </select> 如何在opera，firefox和Internet Explorer中做到这一点？
还有一个图像： 
谢谢
没有必要的黑客或溢出…有一个伪元素下拉箭头在IE …
select::-ms-expand { display: none; }
前面提到的解决scheme适用于Chrome而不是Firefox。
我发现一个解决scheme ，在Chrome和Firefox（不在IE）上都能很好地工作。 将以下属性添加到您的SELECTelement的CSS，并调整margin-top以满足您的需要。
select { -webkit-appearance: none; -moz-appearance: none; text-indent: 1px; text-overflow: ''; }
希望这可以帮助 ：）
从Chrome和Mozilla中select删除下拉箭头的简单方法
select { /*for firefox*/ -moz-appearance: none; /*for chrome*/ -webkit-appearance:none; } /*for IE10*/ select::-ms-expand { display: none; } <select> <option>2000</option> <option>2001</option> <option>2002</option> </select>
select { /*for firefox*/ -moz-appearance: none; /*for chrome*/ -webkit-appearance:none; } /*for IE10*/ select::-ms-expand { display: none; }
<select> <option>2000</option> <option>2001</option> <option>2002</option> </select>
尝试这个 ：
select { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 2px 30px 2px 2px; border: none; }
JS Bin： http : //jsbin.com/aniyu4/2/edit
如果您使用Internet Explorer：
select { overflow:hidden; width: 120%; }
或者你可以使用select： http : //harvesthq.github.io/chosen/
尝试这个：
HTML：
<div class="customselect"> <select> <option>2000</option> <option>2001</option> <option>2002</option> </select> </div>
CSS：
.customselect { width: 70px; overflow: hidden; } .customselect select { width: 100px; -moz-appearance: none; -webkit-appearance: none; appearance: none; }
试试这个对我有用，
<style> select{ border: 0 !important; /*Removes border*/ -webkit-appearance: none; -moz-appearance: none; appearance: none; text-overflow:''; text-indent: 0.01px; /* Removes default arrow from firefox*/ text-overflow: ""; /*Removes default arrow from firefox*/ } select::-ms-expand { display: none; } .select-wrapper { padding-left:0px; overflow:hidden; } </style> <div class="select-wrapper"> <select> ... </select> </div>
select { /*for firefox*/ -moz-appearance: none; /*for chrome*/ -webkit-appearance:none; }
简单而有效。 有用！！
只是想完成线程。 要非常清楚，这不适用于IE9，但是我们可以通过小小的CSS技巧来实现。
<div class="customselect"> <select> <option>2000</option> <option>2001</option> <option>2002</option> </select> </div> .customselect { width: 80px; overflow: hidden; border:1px solid; } .customselect select { width: 100px; border:none; -moz-appearance: none; -webkit-appearance: none; appearance: none; }
select{ padding: 11px 50px 11px 10px; background: rgba(255,255,255,1); border-radius: 7px; -webkit-border-radius: 7px; -moz-border-radius: 7px; border: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; color: #8ba2d4;
}
你不能用一个function齐全的跨浏览器支持来做到这一点。
尝试采取一个50像素的div假设和漂浮在你的select所需的下拉图标的权利
现在在该div中，添加一个宽度为55像素的select标签（比容器的宽度更大）
我想你会得到你想要的。
如果您不想在右侧放置任何拖放图标，只需执行除浮动右侧图像之外的所有步骤。 为select标签设置轮廓：0。 而已
有一个名为DropKick.js的库，用HTML / CSS代替正常的select下拉菜单，所以你可以完全的样式和控制他们的JavaScript。 http://dropkickjs.com/
适用于所有浏览器和所有版本：
JS
jQuery(document).ready(function () { var widthOfSelect = $("#first").width(); widthOfSelect = widthOfSelect - 13; //alert(widthOfSelect); jQuery('#first').wrap("<div id='sss' style='width: "+widthOfSelect+"px; overflow: hidden; border-right: #000 1px solid;' width=20></div>"); });
HTML
<select class="first" id="first"> <option>option1</option> <option>option2</option> <option>option3</option> </select>
正如我在IE上删除select箭头回答
如果你想使用类和伪类：
.simple-control是你的css类
:disabled是伪类
select.simple-control:disabled{ /*For FireFox*/ -webkit-appearance: none; /*For Chrome*/ -moz-appearance: none; } /*For IE10+*/ select:disabled.simple-control::-ms-expand { display: none; }
