Html 有没有办法在css中选择一个打开的选择框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32693560/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is there a way to select an open select box in css?
提问by user2718671
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...
将 webkit-appearance 属性设置为 none 后，我将背景图像（向下箭头）设置为选择框。打开选项列表时，我想显示另一个背景图像（箭头向上）。是否有伪类或其他东西？我在研究过程中什么也没找到...
采纳答案by Curt
It's not possible to detect if a HTML selectelement is opened using CSS, or even javascript.
无法检测是否select使用 CSS 甚至 javascript 打开了 HTML元素。
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 selectelement.
如果您希望自定义自定义下拉列表的箭头符号，最好的选择是使用映射到隐藏select元素的自定义下拉组件。
回答by Nico O
you can use the :focuspseudo class.
你可以使用:focus伪类。
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:focusbut this is rather ugly and is not a solid solution.
但这将指示“打开”状态，也是<select>通过选项卡选择的或刚刚选择的项目。为了规避这一点，您可能会使用类似的东西，select:hover:focus但这相当丑陋，并且不是一个可靠的解决方案。
select:focus {
background-color: blue;
color: white;
}<select>
<option>Click me</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>