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

html css select selector html-select
user2718671 picture user2718671 · Sep 21, 2015 · Viewed 24.7k times · Source

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

Nico O picture Nico O · Sep 21, 2015

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>

Related questions

problem with <select> and :after with CSS in WebKit

I would like to add some style on a select box with the pseudo :after (to style my select box with 2 parts and without images). Here's the HTML: <select name=""> <option value="">Test</option> &…

Read More
How to indent multiple levels of select optgroup with CSS?

Just trying to indent optgroup blocks by nesting depth really, I've tried a general margin-left rule, nested elements then trying to apply the same rule, tried padding-left... is indenting like this possible? It seems elementary :P In the example below, …

Read More
HTML Select tag show vertical scroll with 10 option

I want to make a select box like this with 10 select option, when I try to add more than 15 option it show vertical scroll bar, but not show when it have 10 option. is there any way to achieve this.

Read More