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?
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.
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:
With appreance: none:
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;
}
Nothing visually acceptable IMHO.
Btw this is browser specific as also probably OS specific so it seems to be a loss of time.
