title: How can I remove the dotted lines on a SELECT/OPTION dropdown control in Firefox?
body: <p>In <strong>Chrome</strong> and other browsers my dropdown looks <strong>fine</strong>:</p>
  
  <p><img src="https://i.stack.imgur.com/OihyJ.png" alt="enter image description here"></p>
  
  <p>However, in <strong>Firefox</strong> it has unwanted <strong>dotted</strong> lines:</p>
  
  <p><img src="https://i.stack.imgur.com/l9FFm.png" alt="enter image description here"></p>
  
  <p>I have successfully removed the unwanted Firefox dotted lines for <strong>buttons</strong> and <strong>input</strong> elements with these CSS statements:</p>
  
  <pre><code>button::-moz-focus-inner { border: 0; }
  input::-moz-focus-inner { border: 0; }
  </code></pre>
  
  <p>so I thought these would work for the select/option elements, but they don't:</p>
  
  <pre><code>select::-moz-focus-inner { border: 0; }
  option::-moz-focus-inner { border: 0; }
  </code></pre>
  
  <p><strong>How can I remove the dotted lines in this dropdown so that it appears as in Chrome and other browsers?</strong></p>
  
  <h1>Addendum</h1>
  
  <p>These don't work either:</p>
  
  <pre><code>select::-moz-focus-inner { border: 0; outline: 0 }
  option::-moz-focus-inner { border: 0; outline: 0 }
  </code></pre>
  
  <p>nor these:</p>
  
  <pre><code>select { outline: 0; }
  option { outline: 0; }
  </code></pre>
  
  <p>nor these: </p>
  
  <pre><code>select { outline: none; }
  option { outline: none; }
  </code></pre>