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

user_8798220 0
Viewed 13072

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.

google-chrome css html javascript
9 Answers

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

user_84344150

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

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.

user_96843170

#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 enter image description here

user_107810810

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

user_104155990

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

user_120320470

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 */
}
user_10579610

  1. Go to You and Google

  2. Accessibility

  3. Go to: Show a quick highlight on the focused object turn off problem solved.

user_153951720

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

user_136404400
Related