Html 关于更改select元素的css选择器

我已经用自定义css创建了一个选择框，但问题是，一旦你选择它，我想让自定义箭头向下，所以现在如果我选择任何选项，箭头将向上，选择后，如果我单击外部，它将进入默认向下位置

由于我使用的是焦点这个问题出现了，什么是更好的选择器，以便用户单击选择框，它将向上，一旦用户选择，它将向下恢复正常

请参见示例代码段

。选择{
宽度：40%；
高度：50px；
边界：0；
左边框：1px实心rgba（112112112,0.1）；
背景：透明；
边界半径：0；
外观：无；
-webkit外观：无；
左侧填充：15px；
颜色：绿色；
背景色：#32a8a6；
边界半径：2px；
背景位置：calc（100%-20px）calc（1em+7px），
钙（100%-15px）钙（1em+7px），钙（100%-2.5em）0.5em；
背景尺寸：5px5px，5px5px，1px1.5em；
背景重复：无重复；
背景图像：线性渐变（45度，透明50%，灰度50%），
线性梯度（135度，灰色50%，透明50%）；
字体系列：ProximaNova、Arial、Helvetica Neue、无衬线字体；
}
.选择：焦点{
背景图像：线性梯度（45度，灰色50%，透明50%），
线性梯度（135度，透明50%，灰色50%）；
背景位置：calc（100%-15px）23px，calc（100%-20px）23px，
钙（100%-2.5em）0.5em；
背景尺寸：5px5px，5px5px，1px1.5em；
背景重复：无重复；
大纲：0；
}
.选择：-moz焦点{
颜色：透明；
文本阴影：0#000；
}

一
二

尝试替换

。选择：焦点

为

。选择：焦点：活动

。选择{
宽度：40%；
高度：50px；
边界：0；
左边框：1px实心rgba（112112112,0.1）；
背景：透明；
边界半径：0；
外观：无；
-webkit外观：无；
左侧填充：15px；
颜色：绿色；
背景色：#32a8a6；
边界半径：2px；
背景位置：calc（100%-20px）calc（1em+7px），
钙（100%-15px）钙（1em+7px），钙（100%-2.5em）0.5em；
背景尺寸：5px5px，5px5px，1px1.5em；
背景重复：无重复；
背景图像：线性渐变（45度，透明50%，灰度50%），
线性梯度（135度，灰色50%，透明50%）；
字体系列：ProximaNova、Arial、Helvetica Neue、无衬线字体；
}
。选择：焦点：活动{
背景图像：线性梯度（45度，灰色50%，透明50%），
线性梯度（135度，透明50%，灰色50%）；
背景位置：calc（100%-15px）23px，calc（100%-20px）23px，
钙（100%-2.5em）0.5em；
背景尺寸：5px5px，5px5px，1px1.5em；
背景重复：无重复；
大纲：0；
}
.选择：-moz焦点{
颜色：透明；
文本阴影：0#000；
}

一
二

您可以改用

：active

伪类

由于在下面的示例中显示选项时很难看到箭头方向，因此我更改了背景色以演示效果

。选择{
宽度：40%；
高度：50px；
边界：0；
左边框：1px实心rgba（112112112,0.1）；
背景：透明；
边界半径：0；
外观：无；
-webkit外观：无；
左侧填充：15px；
颜色：绿色；
背景色：#32a8a6；
边界半径：2px；
背景位置：calc（100%-20px）calc（1em+7px），
钙（100%-15px）钙（1em+7px），钙（100%-2.5em）0.5em；
背景尺寸：5px5px，5px5px，1px1.5em；
背景重复：无重复；
背景图像：线性渐变（45度，透明50%，灰度50%），
线性梯度（135度，灰色50%，透明50%）；
字体系列：ProximaNova、Arial、Helvetica Neue、无衬线字体；
}
。选择：活动{
背景色：红色；
}

一
二

@cjl750谢谢您的回答，当我尝试选择选项时，mac中又有一个快速的问题，它没有正确下降，因此效果不明显。对此有什么想法吗？@DILEEPTHOMAS是的，我正在使用mac，并注意到了这个问题。我刚才做了一些搜索，以确保我没有遗漏什么，但我相信你对此无能为力。你必须做一个完全自定义的下拉列表，实际上它根本不是一个

选择
，而是一个更像
span
的
span
角色，然后点击它上面的处理程序，然后你的
选项也将是
span
元素。（不简单，我知道。）
外观：无
对
选择
元素并没有太大的帮助，正是因为这个原因——你可以设置
选择
的样式，但不能设置
选项
。因此，作为一个简单的黑客，我们无能为力，即使我尝试了搜索，但没有找到任何解决方案。很好，谢谢cjl750:）在mac中，当我尝试选择选项时，还有一个快速问题，它没有正确下降，因此效果不可见。在mac中，任何想法选项在选择框上方重叠