Rotate custom image acting as arrow inside dropdown

问题

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.

Thanks in advance!

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