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

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

使用旋转值，元素顺时针或逆时针旋转指定的度数。正值（例如 90 度）使元素顺时针旋转，而负值（例如 -90 度）则使元素逆时针旋转。 我正在发送代码，将其与您在 -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);
  }
}