Javascript 如何旋转/旋转180'；下拉列表中的插入符号理想情况下仅使用CSS？

单击时，如何将插入符号从下拉菜单上倒置（180'）旋转，以便在单击下拉菜单时几乎看起来像动画

如果不使用javascript，只使用CSS就可以完成，但可以接受任何建议，那将是一件非常棒的事情

。选择{
字体系列：“Roboto”；
字体大小：16px；
字体大小：粗体；
颜色：红色；
背景色：白色；
边框：薄而实的红色；
边界半径：8px；
高度：45px；
文本对齐：居中；
右边距：10px；
调整大小：无；
大纲：无；
光标：指针；
}

城市
选择1
选择2

或使用较小的脚本

$（文档）。在（'单击'，'选择'，函数（）上）{
$（this.parent（）.toggleClass（'focused'）；
})

。选择{
字体系列：“Roboto”；
字体大小：16px；
宽度：100%；
字体大小：粗体；
颜色：红色；
背景色：白色；
边框：薄而实的红色；
边界半径：8px；
线高：45px；
填充：0 3em 0 1em；
文本对齐：居中；
右边距：10px；
调整大小：无；
大纲：无；
光标：指针；
-moz外观：无；
-webkit外观：无；
外观：无；
}
.选择器{
位置：相对位置；
显示：内联块；
}
.选择器：：之前{
内容：“；
显示：块；
宽度：5px；
高度：5px；
最高：50%；
右边框：2倍纯黑；
底部边框：2件纯黑；
变换：旋转（45度）；
利润上限：-2.5px；
位置：绝对位置；
右：1em；
颜色：#000；
z指数：2；
}
.selector.focused:：before{
变换：旋转（0）；
}

城市
选择1
选择2

不使用

选择
。你需要使用一个第三方下拉菜单，它在自己的div中用图标（图像或精灵）绘制这个图标。谢谢，使用Javascript，有没有办法通过保持select？（保留select being的原因是我要将这些select链接到我的django应用程序表单和模型）？不知道django，但许多第三方下拉列表通过转换/隐藏底层的
select
-所以…可能。这可能会帮助您@Asturion，这是一个很好的局部解决方案，但是，单击图像后无法更改。