"-webkit-appearance: none;" Firefox equivalent?
I would like to know if the开发者_运维百科re is anything equivalent to: -webkit-appearance: none;
for Firefox?
What I want to achieve:
<select ...>
<option>...</option>
<more option>
</select>
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.
Source:
Mozilla
-moz-appearance:none
with <select>
still shows a dropdown arrow on Firefox.
See this bug report for more information: https://bugzilla.mozilla.org/show_bug.cgi?id=649849
https://developer.mozilla.org/en/CSS/-moz-appearance
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.
Live example: http://jsfiddle.net/gaurangkathiriya/z3JTh/
If you want a select looking like a button in Firefox, use:
select { -moz-appearance: button; }
Like here: http://jsfiddle.net/SsTHA/
Try this...for me it's working on 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: '';
}
Here is the code for Firefox, Chrome, Safari, and Internet Explorer (Internet Explorer 10 and up).
Just add a small down arrow PNG image for your select and it's all set.
My arrow is 30x30, but set it to your specifications.
.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;
}
精彩评论