当我点击

Question

select:required:invalid {
  color: gray !important;
}
option[value=""][disabled] {
  display: none;
}
option {
  color: black;
}

.form-select-cutom {
  height: 40px;
  width: 100%;
  overflow: hidden;
  position: relative;
  border-radius: 3px;
  margin-bottom: 1em;
}

.form-select-custom:before {
  content: ""url(../images/arrow-down-sign-to-navigate.png)"";
  padding: 12px 8px;
  position: absolute;
  right: 10px;
  top: 0;
  z-index: 1;
  text-align: center;
  width: 10%;
  height: 100%;
  pointer-events: none;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">


<div class="form-group form-select-custom">
  <select class="form-control" id="select1">
    <option value="" disabled selected>Salutation</option>
    <option>Mr</option>
    <option>Mrs</option>
  </select>
</div>

当我单击选择框时，我想将箭头旋转180度，第二次单击时我再次旋转回箭头。我尝试使用jquery以及css。运行不正常。有人可以帮我解决这个问题。谢谢。