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.

Answer 1

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