“-webkit-外观：无；”火狐等效？答案

【问题标题】："-webkit-appearance: none;" Firefox equivalent?“-webkit-外观：无；”火狐等效？
【发布时间】：2021-09-01 04:16:21
【问题描述】：

我想知道是否有任何相当于：-webkit-appearance: none; for Firefox？

我想要达到的目标：

<select ...>
   <option>...</option>
   <more option>
</select>

【问题讨论】：

标签： html css

【解决方案1】：

-moz-appearance CSS 属性是在 Gecko (Firefox) 中用于显示使用平台原生的元素基于操作的样式系统的主题。

来源：
Mozilla

【讨论】：

非常感谢。我试图让一个复选框看起来像 chrome 中的一个按钮，但在 Firefox 中却不是这样。form.someform select {border: 1px solid #555; padding: 0.5em; font-size: 10px ; line-height: 0.9em; width: 10%; background: #fff; background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc)); -webkit-appearance ：无；-webkit-box-shadow：-1px -1px 1px #fff；-webkit-border-radius：0.5em；}

【解决方案2】：

-moz-appearance:none 和 <select> 在 Firefox 上仍然显示下拉箭头。

有关更多信息，请参阅此错误报告：https://bugzilla.mozilla.org/show_bug.cgi?id=649849

【讨论】：

MDN 文档 developer.mozilla.org/en-US/docs/CSS/-moz-appearance 暗示 -moz-appearance: none; 仅适用于 XUL。我当然不能让它在网站上工作。

【解决方案3】：

https://developer.mozilla.org/en/CSS/-moz-appearance

【讨论】：

【解决方案4】：

试试这个..它有效

select{
    -moz-appearance: none;
    text-overflow: '';
    text-indent: 0.1px;
}

在 Windows 8、Ubuntu 和 Mac、最新版本的 Firefox 上测试。

现场示例：http://jsfiddle.net/gaurangkathiriya/z3JTh/

【讨论】：

效果很好！ chrome、safari 和 fox……都很好……现在进入 INTERNET EXPLORER

【解决方案5】：

如果您希望选择看起来像 Firefox 中的按钮，请使用：

select { -moz-appearance: button; }

喜欢这里：http://jsfiddle.net/SsTHA/

【讨论】：

然后将背景图片添加到按钮，以设置样式。
他们已经从规范中取消了 [code]appearance[/code]，所以我不怀疑 Mozilla 也取消了 [code]-moz-appearance[/code]。 Mozilla 资源也已更新，建议不要在任何网站上使用此值。

【解决方案6】：

试试这个...对我来说它在 Firefox 上运行：

select {
    padding: 0px 0px 0px 5px;
    border-radius: 0px;
    webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    -webkit-appearance: none;
    background: #ffffff url(../images/small-arrow-down.png) 62px 7px no-repeat;
    padding: 1px 20px 1px 3px;
    cursor: pointer;
    border-radius: 2px;

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

【讨论】：

【解决方案7】：

这里是 Firefox、Chrome、Safari 和 Internet Explorer（Internet Explorer 10 及更高版本）的代码。

只需为您的选择添加一个小的向下箭头 PNG 图像，一切就绪。

我的箭头是 30x30，但请根据您的规格进行设置。

    .yourClass select{
      overflow: none;
      background-color: #ffffff;
      -webkit-appearance: none;
      background-image: url(../images/icons/downArrow.png);
      background-repeat: no-repeat;
      background-position: right;
      cursor: pointer;
    }

    /* Fall back for Internet Explorer 10 and later  */
    .yourClass select::-ms-expand {
        display: none;
    }

【讨论】：