CODEWITHSUNDEEP
cssgoogle-chromeselectwindows-7outline
IeriOggiDomani
IeriOggiDomani

Reputation: 143

Remove outline from select dropdown (Chrome on Windows 7)

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?

Upvotes: 3

Views: 1098

Answers (2)

Jean Claveau
Jean Claveau

Reputation: 1461

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.

Upvotes: 0

benji_croc
benji_croc

Reputation: 44

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.

Upvotes: 1

Related Questions