Question

我试图用其他图标替换选择框中的插入符号图标，然后每当我点击选择框时我都希望此替换图像旋转。

我已成功将插入符号替换为另一个图标。我一直在旋转被替换的图像。

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

如果我使用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

Iam说你想要旋转的图标也只有当任何人点击图标时才会旋转，只要你尝试这个代码，否则如果你想我也可以用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);
  }
}

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

3 个答案: