Remove outline from select dropdown (Chrome on Windows 7)

Question

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?

Answer 1

Because browsers handle UI aethetics differently for elements like radio buttons, checkboxes and select drop downs it's hard to overcome without using JS or complex CSS/HTML. I think Select elements are even harder than radio buttons and checkboxes, I don't think there is a reliable HTML/CSS only for this.

Sorry, I know this isn;t the answer you're looking for. You could also try 'border: 1px solid #COLOR' as a last ditch attempt.