1

In the example below I am trying to change the dropdown to the selection blue background-color '#3390FF' when pressing the TAB key in Chrome like in the IE. Further the blue background-color should be maintained for one option when pressing the up and down arraw. The text color #FFFFFF is required for the text too.

Is there a way to change the background color of select menu to '#3390FF' when pressing the TAB key in Chrome by just using CSS? 

<!DOCTYPE html>
<html>

<head>
<style>
select:focus-within{
   background-color: #3390FF;
   color:#FFFFFF;
}
</style>
</head>

<body>


<h1>The option selected attribute</h1>

<label for="cars1">Choose a car:</label>

<select id="cars1">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="vw">VW</option>
  <option value="audi" selected>Audi</option>
</select>
<select id="cars2">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="vw">VW</option>
  <option value="audi" selected>Audi</option>
</select>

</body>
</html>

enter image description here

benz
  • 693
  • 1
  • 9
  • 29
  • Does this answer your question? [Change select box option background color](https://stackoverflow.com/questions/12836227/change-select-box-option-background-color) – Sumit Patel Mar 06 '20 at 07:52
  • No, since I want to change the color to blue for the selected option when pressing the tab key. – benz Mar 06 '20 at 08:20
  • You should add an event listener which match the `9` keyCode (corresponding to the `[Tab]` key) on `keypress`, then change it via JavaScript. I don’t think you can do it just by CSS. – Federico Moretti Mar 06 '20 at 08:48

0 Answers0