Is there a way to select an open select box in css?

Question

I set a background image (arrow down) to a select box after setting the webkit-appearance attribute to none. When the option list is opened I want to display another background image (arrow up). Is there a pseudo class or something for it? I couldn't find anything during my research...

Answer 1

you can use the :focus pseudo class.

But this will indicate the "open" state, also when the <select> is selected via tab or an item was just selected. To circumvent this, you maybe use something like select:hover:focus but this is rather ugly and is not a solid solution.

select:focus {
  background-color: blue;
  color: white;
}

<select>
  <option>Click me</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

Answer 2

It's not possible to detect if a HTML select element is opened using CSS, or even javascript.

If you wish to customise the arrow symbol of a custom dropdown, your best option is to use a custom dropdown component which maps to a hidden select element.