All geek questions in one place

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

I set the background image (down arrow) in the selection box after setting the appearance attribute of the web kit to none. When the options list opens, I want to display a different background image (up arrow). Is there a pseudo class or something like that? I could not find anything during my repeated search ...

+5
source share
2 answers

It is not possible to determine if an HTML select element is open using CSS or even javascript.

If you want to customize the arrow symbol of a custom drop-down list, the best option is to use a custom drop-down component that appears in the hidden select element.

+8
source

you can use the paudo :focus pseudo-class.

But this will indicate an “open” state, also when the <select> parameter is selected through a tab or element. To get around this, you can use something like select:hover:focus , but this is pretty ugly and 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>
+14
source

Source: https://habr.com/ru/post/1231942/

More articles:


All Articles