How to remove the arrow from a select element in Firefox

后端 未结 30 1235
北恋
北恋 2020-11-22 15:58

I\'m trying to style a select element using CSS3. I\'m getting the results I desire in WebKit (Chrome / Safari), but Firefox isn\'t playing nicely (I\'m not ev

相关标签:
30条回答
  • 2020-11-22 16:46

    Unfortunately for you this is "something fancy". Normally it's not the web authors place to redesign form elements. Many browsers purposely don't let you style them, in order for the user to see the OS controls they are used to.

    The only way to do this consistently over browsers and operating systems, is use JavaScript and replace the select elements with "DHTML" ones.

    Following article show three jQuery based plugins that allow you to do that (it is a bit old, but I couldn't find anything current right now)

    http://www.queness.com/post/204/25-jquery-plugins-that-enhance-and-beautify-html-form-elements#1

    0 讨论(0)
  • 2020-11-22 16:46

    try this css

    select {
        /*for firefox*/
        -moz-appearance: none;
        /*for chrome*/
        -webkit-appearance:none;
    }
    

    Its working

    0 讨论(0)
  • 2020-11-22 16:48

    Important Update:

    As of Firefox V35 the appearance property now works !!

    From firefox's official release notes on V35:

    Using -moz-appearance with the none value on a combobox now remove the dropdown button (bug 649849).

    So now in order to hide the default arrow - it's as easy as adding the following rules on our select element:

    select {
       -webkit-appearance: none;
       -moz-appearance: none;
       appearance: none;
    }
    

    DEMO

    select {
      margin: 50px;
      border: 1px solid #111;
      background: transparent;
      width: 150px;
      padding: 5px;
      font-size: 16px;
      border: 1px solid #ccc;
      height: 34px;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
    }
    <select>
      <option>Apples</option>
      <option selected>Pineapples</option>
      <option>Chocklate</option>
      <option>Pancakes</option>
    </select>

    0 讨论(0)
  • 2020-11-22 16:50

    I think I found the solution compatible with FF31!!!
    Here are two options that are well explained at this link:
    http://www.currelis.com/hiding-select-arrow-firefox-30.html

    I used option 1: Rodrigo-Ludgero posted this fix on Github, including an online demo. I tested this demo on Firefox 31.0 and it appears to be working correctly. Tested on Chrome and IE as well. Here is the html code:

    <!DOCTYPE html>
    <html>
        <head>
        <meta charset="utf-8">
        <title>Custom Select</title>
        <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
        </head>
        <body>
            <div class="custom-select fa-caret-down">
                <select name="" id="">
                    <option value="">Custom Select</option>
                    <option value="">Custom Select</option>
                    <option value="">Custom Select</option>
                </select>
            </div>
        </body>
    </html>
    

    and the css:

    .custom-select {
        background-color: #fff;
        border: 1px solid #ccc;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        margin: 0 0 2em;
        padding: 0;
        position: relative;
        width: 100%;
        z-index: 1;
    }
    
    .custom-select:hover {
        border-color: #999;
    }
    
    .custom-select:before {
        color: #333;
        display: block;
        font-family: 'FontAwesome';
        font-size: 1em;
        height: 100%;
        line-height: 2.5em;
        padding: 0 0.625em;
        position: absolute;
        top: 0;
        right: 0;
        text-align: center;
        width: 1em;
        z-index: -1;
    }
    
    .custom-select select {
        background-color: transparent;
        border: 0 none;
        box-shadow: none;
        color: #333;
        display: block;
        font-size: 100%;
        line-height: normal;
        margin: 0;
        padding: .5em;
        width: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }
    
    .custom-select select::-ms-expand {
        display: none; /* to ie 10 */
    }
    
    .custom-select select:focus {
        outline: none;
    }
    /* little trick for custom select elements in mozilla firefox  17/06/2014 @rodrigoludgero */
    :-moz-any(.custom-select):before {
        background-color: #fff; /* this is necessary for overcome the caret default browser */
        pointer-events: none; 
        z-index: 1; /* this is necessary for overcome the pseudo element */
    }
    

    http://jsbin.com/pozomu/4/edit

    It works very good for me!

    0 讨论(0)
  • 2020-11-22 16:50

    I was having the same issue. It's easy to make it work on FF and Chrome, but on IE (8+ that we need to support) things get complicated. The easiest solution I could find for custom select elements that works "everywhere I tried", including IE8, is using .customSelect()

    0 讨论(0)
  • 2020-11-22 16:51

    Would you accept minor changes to the html?

    Something like putting a div tag containing the select tag.

    Take a look.

    0 讨论(0)
提交回复
热议问题