旋转自定义图像，充当下拉菜单中的箭头

我遵循了在线教程，该教程帮助我用自己的图像替换了浏览器的默认下拉选择箭头.效果很好，您可以在此处看到示例.

I followed a tutorial online that helped me to replace browsers' default dropdown selection arrow with my own image. This has worked fine and you can see the example 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);
}

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

It looks a bit stiff so I want to rotate my image when the dropdown is being opened. I found a lot of examples online dealing with the problem but they all solve it when it is actually a separate object (image, for instance, not a background attribute like in my case).

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

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

My question is - how can I rotate my dropdown selection image without affecting the entire dropdown? I need only the image next to the content, so to say.

提前谢谢！

PS.忽略我对图像的不良选择，我仅以它为例.

PS. Ignore my poor choice of image, I used it only as an example.