How To Remove Black Border From Option When Hover In Chrome 83

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: no

Solution 1:

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

Solution 2:

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;
}

Solution 3:

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.

Solution 4:

#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

Solution 5:

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