Html -webkit 外观:无;火狐相当于?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/5748351/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 08:09:57  来源:igfitidea点击:

-webkit-appearance: none; firefox equivalent?

htmlcss

提问by obinoob

I would like to know if there is anything equivalent to: -webkit-appearance: none;for firefox?

我想知道是否有任何等同于:-webkit-appearance: none;for firefox?

What I want to achive?

我想要达到什么?

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

Thank you.

谢谢你。

采纳答案by Web_Designer

The -moz-appearance CSS property is used in Gecko (Firefox) to display an element using a platform-native styling based on the operating system's theme.

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

Source:
Mozilla

来源:
Mozilla

回答by Pablo B.

-moz-appearance:nonewith <select>still shows a dropdown arrow on Firefox.

-moz-appearance:nonewith<select>仍然在 Firefox 上显示一个下拉箭头。

See this bug report for more information: https://bugzilla.mozilla.org/show_bug.cgi?id=649849

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

回答by gaurangkathiriya

Try this.. It works

试试这个..它有效

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

Tested on Windows 8, Ubuntu and Mac, latest versions of Firefox.

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

Live example: http://jsfiddle.net/gaurangkathiriya/z3JTh/

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

回答by JayD

Here is the code for Firefox, Chrome, Safari, & IE. ( IE 10 and up )

这是 Firefox、Chrome、Safari 和 IE 的代码。(IE 10 及更高版本)

Just add a small down arrow png for your select and its all set. My arrow is 30x30 but set it to your specs.

只需为您的选择和所有设置添加一个小的向下箭头 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 ie10+  */
.yourClass select::-ms-expand {
    display: none;
}

回答by o_O

If you want a select looking like a button in FF why not

如果你想要一个看起来像 FF 中的按钮的选择,为什么不

select { -moz-appearance: button; }

Like here: http://jsfiddle.net/SsTHA/

像这里:http: //jsfiddle.net/SsTHA/

回答by Ansyori

try this...for me it's working on firefox

试试这个……对我来说,它在 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: '';
}