How can I remove focus from select box Options using javascript and css

Question

I want to remove focus outline from select options but not from select. how can i do that? I did the following for the select box

select:focus{
  outline:0px
}

I want to do the same for options.

Answer 1

When a child <option> of the parent <select> menu is selected/focused it will populate the <select> with the selection and show a focus ring around the element for this reason.

<select> is the parent element of all of your <option> child elements.

The way your <select> menu also displays is also dictated by a few things including your current OS/browser:

e.g.: all <option> elements display with a blue background on :hover and :focus on a Mac for instance

So you have the option of either removing a focus outline entirely from the <select> element and its children OR changing your <select> element into a <ul> with <li> elements that can be styled at will.

Please see this Stack Overflow post for more detail.

--

Please Note: The focus outline serves the purpose of making your element accessible for users on screen readers, so if you remove any sort of focus behavior for selected elements - folks using keyboard navigation won't be able to tell which item is selected. You can check out the W3C documentation for best practices.

You could implement two different types of <select> behavior for users with accessibility concerns (e.g.: adding a class to elements in the event that a screen reader is detected - which can be challenging, so check out this great Hackernoon blog post on the matter) to make sure both types of users' needs are taken care of.

--