Question

这个hack曾经在＆lt; = Firefox 29中工作以删除<select>箭头：

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

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

Codepen for hack that works in Firefox 29
Related bug（现已在Fx 35b中修复）

有谁知道达到同样效果的方法？

注意1：我对将箭头与其他元素重叠的解决方案或嵌套select元素并执行溢出的解决方案不感兴趣：隐藏。

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

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

Answer 1

我通过给div添加一些样式并单独选择来解决我的问题。

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

这是js小提琴。 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;}

Answer 2

将select放入另一个具有overflow：hiden;的容器中，使select更宽，然后容器。如果你想边框将它添加到容器中。

一个例子是本页底部的选择器： https://mozillians.org/en-US/

Answer 3

您可以将此解决方案用于firefox，使用供应商伪类：-moz-any（）和仅针对mozilla的指针事件，不会影响其他浏览器，因为这两个版本自版本3.6起都有效。

这是一个jsbin示例http://jsbin.com/pozomu/4/edit

Answer 4

/ *对于mozilla Firefox 30.0+，我使用以下内容来掩盖重新出现的箭头：* /

@ - moz-document url-prefix（）{

.yourClass:after {
    position: absolute;
    margin-left: -25px;
    border-radius: 4px;
    content: url('../images/pathToYourDownArrowImage.svg');
    pointer-events: none;
    overflow: hidden;
}

/ *我仍然使用它将文本移到* /

上

.yourClass select {
    text-overflow: '';
    text-indent: -1px;
    -moz-appearance: none;
    background: none;
}

}

Answer 5

Firefox＆gt; 29 -moz-appearance：none;工作，但有宽度的问题，我们将选择的宽度从100扩展到110％隐藏，但它影响了表单的设计，所以我只是用div隐藏它，然后来了，

检查codepen版本

http://codepen.io/ssbalakumar/pen/jgLEq

Answer 6

正如@mircea c暗示......

如果你的HTML看起来像这样：

<div class="styled-select">
   <select>
     <option>Here is the first option</option>
     <option>The second option</option>
     <option>The thrid option</option>
   </select>
</div>

然后您可以删除Firefox 30 +中的下拉箭头

.styled-select { 
  overflow: hidden; 
  width: 200px;
}

@-moz-document url-prefix(){
  .styled-select select { width: 110%; }
}

工作演示： codepen

仅供参考：同样的技术适用于IE 8＆amp; 9，只需使用条件评论而不是@-moz-document url-prefix()

如何隐藏Firefox 30 +中的<select>箭头？</select>

6 个答案: