CODEWITHSUNDEEP
cssgoogle-chromesafari
demetrio812
demetrio812

Reputation: 289

Remove Safari/Chrome select focused shadow

I'm trying to remove the following shadow from a select when it's focused:

I've set:

select {
    border: none;
    box-shadow: none;
    -webkit-box-shadow: none;
    outline: none;
    -webkit-appearance:none;
    -moz-appearance:none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

HTML:

<select />

But those don't work. Any suggestions?

Upvotes: 3

Views: 9577

Answers (2)

demetrio812
demetrio812

Reputation: 289

the solution for me was:

box-shadow: none !important;

Somehow it wasn't taking the box-shadow I've set before adding !important

Now it's not showing the "glow" anymore.

Thanks for the replies anyway,

Dem

Upvotes: 1

Jevgenijs Šulins
Jevgenijs Šulins

Reputation: 644

Use the following style:

select:focus {
    outline: none;
}

Or this, for all form elements:

input:focus,
select:focus,
textarea:focus {
    outline: none;
}

Upvotes: 5

Related Questions