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

Question

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

12

这个hack曾经在Firefox 29及以下版本中有效，用于移除

- Blaise

只使用 appearance:none; 而不加上 moz 前缀怎么样？ - Pete

正如@Pete所建议的那样，尝试使用appearance属性。Firefox一直在使用Mozilla的解决方案**-moz-appearance（对于其他一些浏览器，还有-webkit-appearance**），因此也许现在已经正确支持appearance属性了（值得一试）。更新：您是否按Ctrl+F5刷新了CSS文件？ - Phil Perry

这里有一些有趣的选项：https://dev59.com/sm025IYBdhLWcg3wl3K- - Pete

@Pete：我尝试了所有的方法，但都没有成功。 - Blaise

1

"-moz-appearance: none" 在 Fx 35b 中再次起作用。 - Blaise

显示剩余4条评论

6个回答

2

将选择器放在另一个容器中，该容器具有overflow: hidden;属性，使选择器比容器更宽。如果需要边框，请将其添加到容器中。

下面是一个示例，页面底部的选择器： https://mozillians.org/en-US/

- Mircea.c

如果我没有漏掉什么，这种方法在您事先不知道选项长度的情况下是无效的。问题中的代码片段允许一个固定大小的选择框，其下拉框会自动调整到最长选项的宽度。 - Matthias

1

您可以使用这个解决方案来适用于Firefox，使用厂商伪类 :-moz-any() 和指针事件仅适用于Mozilla，并不影响其他浏览器，因为两者都从3.6版本开始有效。

这里有一个 jsbin 示例 http://jsbin.com/pozomu/4/edit。

- user3806477

0

/* 对于 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;
}

}

- Todd Bruss

0

Firefox > 29 -moz-appearance:none; 可以正常工作，但是宽度存在问题，我们将选择框的宽度从100%扩展到110%以进行隐藏，但这会影响表单的设计，所以我只是用一个div来隐藏它并解决了这个问题。

请查看Codepen版本。

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

- Bala Kumar

-1

正如@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和9，只需使用条件注释代替@-moz-document url-prefix()

- JamesBarnett

引用我自己的话：“我对覆盖箭头的其他元素的解决方案或嵌套选择元素并进行overflow:hidden的解决方案不感兴趣。” - Blaise

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rajdeep · Accepted Answer

我通过单独为div和select设置样式来解决了这个问题。

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

这是它的js fiddle链接。 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;}