CODEWITHSUNDEEP
htmlcssgoogle-chromestyles
michael
michael

Reputation: 39

Remove border in select option when active

Have you already noticed that Google have recently implemented a border in select option when active for Chrome? Any ideas how to disable this functionality? Firefox doen't have this border.

Google chrome Version 83.0.4103.61 (64-bit)

<html>
<head>
    <style>
        select option:focus {
            border:0px;
            outline:0px;
            -webkit-appearance: none;
            outline: none !important;
        }
    </style>
</head>
<body>
    <select>
        <option>Test11</option>
        <option>Test22</option>
    </select>
</body>
</html>

jsfiddle.net/fq3korhg/

Upvotes: 2

Views: 4985

Answers (3)

William Galeano Medina
William Galeano Medina

Reputation: 1

*:focus {
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

this is the aspect in Bootstrap 5

Upvotes: 0

Sameera Herath
Sameera Herath

Reputation: 201

Try it with this:

select:focus {
    outline:none;
}

Upvotes: 1

Alexander Masan
Alexander Masan

Reputation: 76

Need to set property for select:

select:focus {
  outline: none; 
}

Upvotes: 1

Related Questions