title: Remove dotted border/outline of focused dropdown menu
body: <p>How do you remove the dotted border/outline that is shown when selecting an item from a dropdown menu?</p>
  
  <p><img src="https://i.stack.imgur.com/OPFMo.png" alt="enter image description here"></p>
  
  <p>You can see there is a dotted border/outline shown, I want to remove this (screenshot taken in Firefox).</p>
  
  <p>Trying the solution below did not remove it:</p>
  
  <pre><code>select:focus, option:focus, select::-moz-focus-inner, option::-moz-focus-inner {
      outline: none;
      border: none;
  }
  </code></pre>
  
  <p>The HTML is just simply this:</p>
  
  <pre><code>&lt;select name="order"&gt;
     &lt;option value="desc"&gt;Newest to oldest&lt;/option&gt;
     &lt;option value="asc"&gt;Oldest to newest&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>