How to properly style the Select2 outline on :focus?

Question

I'm using Select2 to style my <select> boxes, but I can't seem to style the forced outline which Chrome applies to the style:

Problem:

I've tried several lines of (very unprofessionally, !important) CSS code, but so far I haven't come up with the solution, this is what i'm at right now:

CSS:

.select2 > *:focus, .select2:focus .select2 > *, .select2 {
    outline-width: 0px !important;
}

For the sake of excluding potential problems, i'm definitely including this CSS file, after my regular select2.css

Also, a fiddle would be problematic, but I could provide one if really necessary

Answer 1

This seems to do the trick:

  <style>
    .select2-container *:focus {
        outline: none;
    }
  </style>

Here is a plunk.

Answer 2

This works for me:

&.select2-container--focus {
    outline: none;
}