Remove outline from select dropdown (Chrome on Windows 7)

user_4098286 0
Viewed 1033

I am trying to remove a blue outline from the option list of a select element.

As I only see this outline on Chrome on Windows 7, here is an image which points out the outline I’m talking about

Here is the code: https://jsfiddle.net/463pLc67/

I’ve tried using outline-color on the option:focus as well but it doesn’t seem to have any effect. Is there any way to get rid of this outline just using CSS?

outline google-chrome windows-7 select css
2 Answers

The appearance: none rule changes a bit the display (On Ubuntu/Chromium) but makes it more buggy: no right-border but still some left-borders (No effect on firefox).

Normal:

enter image description here

With appreance: none:

enter image description here

You can play with the background-color which works also on <option> to make it closer to your outline color so it would hide it a little.

select.lalala option {
  background-color: #727272;
}

enter image description here

Nothing visually acceptable IMHO.

Btw this is browser specific as also probably OS specific so it seems to be a loss of time.

user_27142850
Related