Roberrrt Roberrrt - 3 months ago 14
CSS Question

How to style the Select2 outline on :focus?

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:
enter image description here

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

This seems to do the trick:

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

Here is a plunk.