How do I remove the select option black border in Chrome?

Question

As shown in the picture below,

black border is shown when the select option is hover from the chrome.

how can I remove the border?

The code below didn't work.

select{

  &:hover,
  &:focus 
  {
    outline: 0 !important;
  }
}

I'd appreciate it if you could help me solve the problem.

Answer 1

It happen when chrome updated. Actually, it it's a update feature from chromium that update in 2020. If you interested know about more feature below this link.

https://blog.chromium.org/2020/03/updates-to-form-controls-and-focus.html

#Problem solution:

Just go to below this link

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

and Disabled Web Platform Controls updated UI

Answer 2

1. Go chrome flags

2. Disable #form-controls-refresh