How to remove black border from option when hover in chrome 83

Question

I update my chrome browser to 83 and saw the option tag and it looks ugly, It shows the black border when hovering in option.

I tried

option {
    box-shadow: none;
    border: none;
    -webkit-appearance: none;
}

option:hover {
    box-shadow: none;
    border: none;
    -webkit-appearance: none;
}

option {
  box-shadow: none;
  border: none;
  -webkit-appearance: none;
}

option:hover {
  box-shadow: none;
  border: none;
  -webkit-appearance: none;
}

<select>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
  <option value="4">Option 4</option>
</select>

but still no luck!! why? I don't know.

I want to remove that black border because In my project it looks ugly.

MY NEED

I need same result as previous select and option tag have.

When you select any option tag, `select tag` shows weird black border and change its `border-radius` — Nisharg Shah, May 23 '20 at 11:39
This black border is now ubiquitos in chrome. Not only in the options. I'm also searching for a way to get rid of it. At least for myself. Did you try https://stackoverflow.com/questions/3397113/how-to-remove-focus-border-outline-around-text-input-boxes-chrome ? — Antony Hatchkins, May 23 '20 at 19:16
The focus outline styles were updated for accessibility reasons: https://blog.chromium.org/2020/03/updates-to-form-controls-and-focus.html — Ben, May 26 '20 at 06:48
@Benni, I know that UI is changed in chrome 83 but I want to remove that black border, is it possible? — Nisharg Shah, May 26 '20 at 09:29
Not only it's UGLY, but it's even implementation-broken - If you quickly hover and unhover an option and start scrolling the page, the options do not close :) I cannot believe this ended up in production. — Roko C. Buljan, May 28 '20 at 01:47
@AntonyHatchkins I tried that and it works great in chrome. But those ugly black lines remain on the option elements. Also they have a small height... — B001ᛦ, May 30 '20 at 21:53
Just to make a remark, the outline workaround doesn't seem to work any longer (Version 87.0.4280.88 (Official Build) (64-bit). OS: Windows / Linux - didn't test it on other OS though. — Jay, Dec 11 '20 at 20:05
Does this answer your question? [Google Chrome showing black border on focus state for button user agent styles](https://stackoverflow.com/questions/61992025/google-chrome-showing-black-border-on-focus-state-for-button-user-agent-styles) — Mo Shal, Jul 24 '23 at 14:45

score 10 · Answer 1 · answered May 28 '20 at 08:38

10

I found this thread

Sadly, there's not a bug or something similar. It is a new feature

I hope that they will change their implementation in chrome's next release.

:focus-visible, :focus and :hover are not working for the option in this chrome version

answered May 28 '20 at 08:38

MariaF

101
4

3

I hope it will optional in chrome 84 – Nisharg Shah May 28 '20 at 09:26
Thanks for answering a question but the problem is it will disable all-new feature given by chrome and If I talk about 2nd answer it will require an extension for change – Nisharg Shah May 28 '20 at 09:32

score 10 · Answer 2 · answered Jul 27 '20 at 04:16

10

in Chrome 84, the black border around select option item doesn't seem to appear when hovering. Now changing css outline rule is the easiest way to remove black border for focusable input.

*:focus {
  outline: none;
}

answered Jul 27 '20 at 04:16

Rongrong Luo

392
3
10

score 6 · Answer 3 · answered Jun 02 '20 at 11:31

6

#Problem solution:

Go to below link or copy paste chrome url tab and hits enter.

chrome://flags/#form-controls-refresh

and Disabled Web Platform Controls updated UI

answered Jun 02 '20 at 11:31

Md. Golam Rabbani

104
5

That answer is already given above, don't give the same answer as Maria given. – Nisharg Shah Jun 02 '20 at 12:15
1

This actually helped me alot. I dont have to open any 3rd party links ... – Andre Elrico Jun 16 '20 at 15:55

score 5 · Answer 4 · answered May 30 '20 at 05:09

5

This is an experimental feature. You could try disabling this flag: chrome://flags/#form-controls-refresh Apparantly the 83+ version of chrome changed how forms are rendered / handled.

answered May 30 '20 at 05:09

Gagan Deep

1,508
9
13

That answer is already given above, don't give the same answer as Maria given. – Nisharg Shah May 30 '20 at 10:14
3

Did she mention how to turn it off. Don't jump the gun on down votes. I dont mind downvotes but I added something to the context. – Gagan Deep May 30 '20 at 10:20
I don't even mention about the downvote and I didn't downvote your question, I just give the information, please don't repeat the same answer because your answer and Maria thread answer is exactly copy cat, so don't copy-paste answers from another site – Nisharg Shah May 30 '20 at 10:50
This is not a solution from the developer's point of view. This only work if you don't like to see it as a user. – MariaF Jun 03 '20 at 11:32

score 2 · Answer 5 · answered Oct 08 '20 at 16:31

2

The only thing that helps is css style for element: outline: none;

answered Oct 08 '20 at 16:31

Sergei Ermilov

31
3

score 0 · Answer 6 · answered Oct 01 '20 at 12:30

0

You just need to set outline:none in select tag css property

answered Oct 01 '20 at 12:30

Vivek Verma

1
1

1

This answer does not add anything useful to the question. There is an answer like that already. – Magiczne Oct 01 '20 at 14:42

score 0 · Answer 7 · answered Jan 15 '21 at 12:07

0

I solved it this way:

*, *:focus, *:hover {
    outline: none;
}

select {
    border: 0px none;
    border-radius: 0.001px; /* this value must be greater than 0, otherwise it won't work */
}

answered Jan 15 '21 at 12:07

Max

7,408
2
26
32

score 0 · Answer 8 · answered Jan 11 '23 at 23:22

I think this people is not understanding the problem... let me help you with this.

The solution is this, just add this property to your base css class:

.your-select-class {
    border: 0.5px solid #D1D5DB;
    outline: none; // this removes the border line 
}

And then if your want to change the properties in base of events you can do this:

.your-select-class {
    border: 0.5px solid #D1D5DB;
    outline: none;
    &.focus: { 
       // To this you can add a condition with the event "onfocus" and
       // then change the css properties. In this case, i'm using sccs.
       border: 0.5px solid #29ABE2;
       box-shadow: 0px 0px 8px rgba(41, 171, 226, 0.5);
    }
    &.selected: {
       // Same than the other, but with onchange method
       border: 0.5px solid #D1D5DB;
       box-shadow: 0px 0px 5px rgba(122, 185, 211, 0.8);
    };
}

score -1 · Answer 9 · edited Mar 14 '21 at 19:37

-1

Go to You and Google
Accessibility
Go to: Show a quick highlight on the focused object turn off problem solved.

edited Mar 14 '21 at 19:37

Mario Petrovic

7,500
14
42
62

answered Mar 14 '21 at 17:39

J Wilson

1

score -3 · Answer 10 · answered May 29 '20 at 08:38

-3

Changing the colour of the border seems to remove the black hover state

answered May 29 '20 at 08:38

Tom D

1

1

No, that's wrong, please check before answering any question – Nisharg Shah May 29 '20 at 08:48

How to remove black border from option when hover in chrome 83

10 Answers10

Go to below link or copy paste chrome url tab and hits enter.

Linked