如何在点击时旋转选择框的插入符号图标？

<select id="mySelect">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

#mySelect {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url('insert_icon.png');
  background-repeat: no-repeat;
  background-position: right center;
  padding-right: 20px; /* 为了给插入符号图标留出空间 */
}

var select = document.getElementById("mySelect");
select.addEventListener("click", function() {
  this.style.transform = "rotate(180deg)";
});