title: Cannot remove outline/dotted border from Firefox select drop down
body: <p>I have a styled down down, but I cannot remove the dotted border when it is clicked in <strong>Firefox</strong>. I've used <code>outline: none</code> but it still doesn't work. Any ideas?</p>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.styled-select {
      background: lightblue;
      font-size: 20px;
      height: 50px;
      line-height: 50px;
      position: relative;
      border: 0 none !important;
      outline: 1px none !important;
  }
  .styled-select select {
     background: transparent;
     border: 0;
     border-radius: 0;
     height: 50px;
     line-height: 50px;
     padding-top: 0; padding-bottom: 0;
     width: 100%;
     -webkit-appearance: none;       
     text-indent: 0.01px;
     text-overflow: '';
     border: 0 none !important;
     outline: 1px none !important;
  }
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="styled-select"&gt;
      &lt;select id="select"&gt;
          &lt;option value="0"&gt;Option one&lt;/option&gt;
          &lt;option value="1"&gt;Another option&lt;/option&gt;
          &lt;option value="2"&gt;Select this&lt;/option&gt;
          &lt;option value="3"&gt;Something good&lt;/option&gt;
          &lt;option value="4"&gt;Something bad&lt;/option&gt;
      &lt;/select&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Please see this <a href="http://jsfiddle.net/FtVGg/">jsFiddle</a>.</p>