Style a Firefox select

Remove arrow on Firefox select element

HTML

<h2>CSS-only custom-styled selects v8</h2>

  <p><Strong>How this works:</strong> This styles a native select consistently cross-platform with only minimal CSS. The native select is then styled so it is essentially invisible (no appearance, border, bg) leaving only the select's text visible. There is a wrapper around the select that has the majority of the button styles (gradient, shadow, border, etc.). We then add the custom arrow via a pseudo element to the right. </p>
  
  
    <label>Native select</label>
    <select>
       <option>Apples</option>
       <option>Bananas</option>
       <option>Grapes</option>
       <option>Oranges</option>
       <option selected>A very long option name to test wrapping</option>
    </select>
    
  
    <label class="wrapper">This label wraps the select
      <div class="button custom-select ff-hack">
        <select>
          <option>Apples</option>
          <option>Bananas</option>
          <option>Grapes</option>
          <option>Oranges</option>
          <option>A very long option name to test wrapping</option>
        </select>
      </div>
    </label>
      
    <label class="wrapper" for="states">This label is stacked above the select</label>
      <div class="button custom-select">
        <select id="states">
          <option value="AL">Alabama</option>
          <option value="AK">Alaska</option>
          <option value="AZ">Arizona</option>
          <option value="AR">Arkansas</option>
          <option value="CA">California</option>
          <option value="CO">Colorado</option>
          <option value="CT">Connecticut</option>
          <option value="DE">Delaware</option>
          <option value="FL">Florida</option>
          <option value="GA">Georgia</option>
          <option value="HI">Hawaii</option>
          <option value="ID">Idaho</option>
          <option value="IL">Illinois</option>
          <option value="IN">Indiana</option>
          <option value="IA">Iowa</option>
          <option...

CSS

/* Some basic page styles */
    body { 
      background-color: #fff;
      font-family: helvetica, sans-serif;
      margin: 4% 10%
    }
    
    /* Label styles: style as needed */
    label {
      display:block;
      margin-top:2em;
      font-size: 0.9em;
      color:#777;
    }

    /* Container used for styling the custom select, the buttom class below adds the bg gradient, corners, etc. */
    .custom-select {
      position: relative;
      display:block;
      margin-top:0.5em;
      padding:0;
    }
    
    /* These are the "theme" styles for our button applied via separate button class, style as you like */
    .button {
      border: 1px solid #bbb;
      border-radius: .3em;
      box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
      background: #f3f3f3; /* Old browsers */
      background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
      background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
      background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Opera 11.10+ */
      background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* IE10+ */
      background: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%); /* W3C */
    }

    /* This is the native select, we're making everything but the text invisible so we can see the button styles in the wrapper */
    .custom-select select {
      width:100%;
      margin:0;
      background:none;
      border: 1px solid transparent;
      outline: none;
      /* Prefixed box-sizing rules necessary for older browsers */
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      /* Remove select styling */
      appearance: none;
      -webkit-appearance: none;
      /* Font size must the 16px or larger to prevent iOS page zoom on focus */
     ...