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

Question

我正在尝试用其他图标替换选择框中的插入符号图标，然后我希望每当我单击选择框时，这个替换的图像都会旋转。

我已经成功地用另一个图标替换了插入符号。我被困在旋转替换的图像中。

以下是我到目前为止编写的代码

​

select{
width: 50%;
height: 30%;
appearance : none;
-webkit-appearance : none;
background-image : url('https://cdn0.iconfinder.com/data/icons/slim-square-icons-basics/100/basics-08-128.png');
background-repeat: no-repeat;
background-size: contain;
background-position : right;
}

<select>
<option></option>
</select>

​

当图像被替换为背景图像时，如果我使用transform : rotate属性，整个选择框将被旋转。如何仅旋转图标？？

Answer 1

​

$('.wrapper select').on('focus', function(e) {
  $(this).parent().addClass('active');
});
$('.wrapper select').on('blur', function(e) {
  $(this).parent().removeClass('active');
});

.wrapper {
position: relative;
display: inline;
}

select{
width: 50%;
height: 30%;
appearance : none;
-webkit-appearance : none;
}

.wrapper:before {
content: '';
width: 10px;
height: 10px;
display: block;
position: absolute;
top: 4px;
right: 4px;
background-image : url('https://cdn0.iconfinder.com/data/icons/slim-square-icons-basics/100/basics-08-128.png');
background-repeat: no-repeat;
background-size: contain;
}

.wrapper.active:before {
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
}

select:f

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<select>
<option>zxxdf</option>
</select>
</div>

​

Answer 2

我的意思是，你想要旋转的图标也将旋转时，任何人都会点击图标，只有一次你尝试这个代码，否则，如果你想，我可以发送代码与javascript函数也

Answer 3

使用旋转值，元素将按指定度数顺时针或逆时针旋转。正值(例如90deg )将顺时针旋转元素，而负值(例如-90deg )将逆时针旋转元素。我正在发送代码，使用您在-webkit之后给出的名称编写代码-您编写此代码

在html文件中，您可以这样写：

在css中，您可以执行以下操作：

.icon-name {
  background: mediumaquamarine;
  border-radius: 2% 50%;
  height: 100px;
  margin: 100px;
  transition: all 3s;
  transition-timing: ease-in-out;
  width: 100px;


  &:hover {
    transform: rotate(1080deg);
  }
}