如何隐藏< select> Firefox 30+中的箭头？ [英] How can I hide a <select> arrow in Firefox 30+?

问题描述

此黑客用于在< = Firefox 29中删除< select> 箭头：

  text-overflow：''; 
 text-indent：0.01px; 
 -moz-appearance：none; 
  

它不再适用于Firefox 30.箭头回来了。

• Codepen for hack可在Firefox 29中使用


• 相关错误（现已修正Fx 35b）

有没有人知道实现相同效果的方法？

注意1：对于用另一个元素覆盖箭头的解决方案，或者嵌套select元素并执行overflow：hidden的解决方案，我不感兴趣。 >

注意2：我尝试了所有 -moz-appearance 可能性。他们或者添加默认样式，我不能覆盖，不允许自定义样式（特别是边框和背景），或者箭头仍然可见。

strong>更新：它在Firefox 35（目前处于测试阶段）使用 -moz-appearance：none 再次运行，使其在所有最新浏览器在IE11，Firefox 35b，Chrome 39，Safari 8）： http://jsfiddle.net/phd5pu9x/

解决方案

我修复了我的这个问题，给一些风格div并单独选择。

任何人都可以根据需要改变他的宽度和其他样式属性。 ：）

这里是js fiddle。 JSFIDDLE

 < div class =common-dropdown-small-divstyle =width：220px> 
< select id =selectclass =common-dropdown-project-select> 
< option> 
 apple 
< / option> 
< option> 
 blackberry 
< / option> 
< option> 
 pumpkin 
< / option> 
< / select> 
  

  .common-dropdown-small-div {
 border：1px solid rgb（208，208，208）; 
 overflow：hidden; 
 width：220px; } 
 
 .common-dropdown-project-select {
 width：100％！important; 
 background-image：url（http://upload.wikimedia.org/wikipedia/en/f/f1/Down_Arrow_Icon.png）; 
 background-position：97％60％，0 0！重要; 
 background-repeat：no-repeat; 
 background-size：25px 16px; 
 border：none！重要; 
 outline：medium none！important; 
 display：inline-flex！important; 
 height：33px！important; 
 vertical-align：top; 
 -webkit-appearance：none; } 
 
 select ::  -  ms-expand {
 display：none;} 
  

This hack used to work in <= Firefox 29 to remove a <select> arrow:

text-overflow: '';
text-indent: 0.01px;
-moz-appearance: none;

It no longer works in Firefox 30. Arrow is back.

• Codepen for hack that works in Firefox 29
• Related bug (now fixed in Fx 35b)

Does anyone know a way to achieve the same effect?

Note1: I'm not interested in solutions that overlay the arrow with another element, or solutions that nest the select element and do a overflow:hidden.

Note2: I tried all -moz-appearance possibilities. They either add default styling I cannot override, don't allow custom styling (border and background, specifically), or the arrow is still visible.

Update: it works again in Firefox 35 (currently in beta) using -moz-appearance: none, making this look consistent in all latest browsers (Tested in IE11, Firefox 35b, Chrome 39, Safari 8): http://jsfiddle.net/phd5pu9x/

解决方案

I fixed my this issue by giving some style to div and select individually.

Anyone can change his width and other style properties a/c to needs. :)

Here is the js fiddle for it. JSFIDDLE

<div  class="common-dropdown-small-div" style="width: 220px">
<select id="select" class="common-dropdown-project-select">
    <option>
        apple
    </option>
    <option>
        blackberry
    </option>
    <option>
       pumpkin
    </option>
</select>

.common-dropdown-small-div{
border: 1px solid rgb(208, 208, 208);
overflow: hidden; 
width: 220px;  }

.common-dropdown-project-select{
  width: 100% !important;
background-image: url("http://upload.wikimedia.org/wikipedia/en/f/f1/Down_Arrow_Icon.png");
background-position: 97% 60%, 0 0 ! important;    
 background-repeat: no-repeat;
background-size: 25px 16px;
border: none  ! important;    
outline : medium none !important;
display: inline-flex !important;
height: 33px !important;
vertical-align: top;
-webkit-appearance: none; }

select::-ms-expand {
display: none;}

这篇关于如何隐藏&lt; select&gt; Firefox 30+中的箭头？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！