开发者

"-webkit-appearance: none;" Firefox equivalent?

开发者 https://www.devze.com 2023-02-28 12:32 出处:网络
I would like to know if the开发者_运维百科re is anything equivalent to: -webkit-appearance: none; for Firefox?

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;
    }
0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号