旋转自定义图像作为下拉列表中的箭头答案

【问题标题】：Rotate custom image acting as arrow inside dropdown旋转自定义图像作为下拉列表中的箭头
【发布时间】：2016-09-17 23:04:33
【问题描述】：

我遵循了一个在线教程，该教程帮助我将浏览器的默认下拉选择箭头替换为我自己的图像。这运行良好，您可以查看示例 here。

.headerDropdown {
  border-radius: 6px;
  border: 2px solid #d4d4d4;
  height: 34px;
}

.headerDropdown select {
  height: 34px;
  line-height: 34px;
  padding-left: 10px;
  padding-right: 5px;
  margin-right: 20px;
  font-size: 16px;
  border: 0 !important;  /*Removes border*/
  -webkit-appearance: none;  /*Removes default chrome and safari style*/
  -moz-appearance: none;  /*Removes default style Firefox*/
  background: url("http://enyojs.com/enyo-2.5.1/lib/moonstone/images/caret-black-small-up-icon.png") right no-repeat;
  width: 100%;
  background-position: 98% 50%;
  background-color: white;
  text-indent: 0.01px;
  text-overflow: "";
  transition: 0.2s;
}

.headerDropdown select::-ms-expand {
  display: none;
}

.headerDropdown select::-moz-focus-inner {
  border: 0;
  padding: 0;
}

.rotateCaret {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}

它看起来有点僵硬，所以我想在打开下拉菜单时旋转我的图像。我在网上找到了很多处理这个问题的例子，但是当它实际上是一个单独的对象（例如，图像，而不是像我这样的背景属性）时，它们都解决了这个问题。

$("#mainnavigation").on("click", function() {
  $(this).toggleClass("rotateCaret");
});

我的问题是 - 如何在不影响整个下拉列表的情况下旋转我的下拉选择图像？我只需要内容旁边的图片，可以这么说。

提前致谢！

PS。请忽略我对图像的糟糕选择，我仅将其用作示例。

【问题讨论】：

标签： javascript jquery css css-animations

【解决方案1】：

为插入符号添加另一个元素并单独旋转它。您可以创建自定义 CSS animation 并根据需要对其进行操作。

https://jsfiddle.net/johnniebenson/xajzuxn4/

【讨论】：

使用您的好建议，我几乎以同样的方式解决了它（并为其设置了动画），而无需使用关键帧。我相信关键帧应该在更复杂的场合发挥作用。另外，请记住，关闭时它不会动画回来。但这是一个很好的答案，它帮助我解决了这个问题，我将其标记为正确。谢谢:)
另外，我必须注意的另一件事是，当您单击新创建的插入符号时，您无法打开下拉菜单。