title: How to properly style the Select2 outline on :focus?
body: <p>I'm using <a href="https://select2.github.io/" rel="noreferrer">Select2</a> to style my <code>&lt;select&gt;</code> boxes, but I can't seem to style the forced outline which Chrome applies to the style:</p>
  
  <p>Problem:
  <a href="https://i.stack.imgur.com/Q1irg.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Q1irg.png" alt="enter image description here"></a></p>
  
  <p>I've tried several lines of (very unprofessionally, <code>!important</code>) CSS code, but so far I haven't come up with the solution, this is what i'm at right now:</p>
  
  <p>CSS:</p>
  
  <pre><code>.select2 &gt; *:focus, .select2:focus .select2 &gt; *, .select2 {
      outline-width: 0px !important;
  }
  </code></pre>
  
  <p>For the sake of excluding potential problems, i'm definitely including this CSS file, <em>after</em> my regular select2.css</p>
  
  <p>Also, a fiddle would be problematic, but I could provide one if really necessary</p>