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

我试图用其他图标替换选择框中的插入符号图标，然后我希望这个替换的图像在我点击选择框时旋转。单击时如何旋转选择框的插入符号图标？

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

这里是我写到目前为止

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>

，好像我用变换的图像替换为背景图像的代码：旋转属性整个选择框会旋转。我应该如何旋转图标？

来源

2017-03-09 Harish

送到这里的代码只是一旦你试试这个代码是一个工作解决方案的兄弟http://stackoverflow.com/a/37351567/4323504 –

谢谢。我会检查它。 – Harish

谢谢@TheFlash它的工作:) – Harish

$('.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>

来源

2017-03-09 06:04:49

图像不应该只是从下往上改变。它应该旋转向上动画 – Harish

尝试我的代码片 –

-2

随着旋转值，该元件向顺时针方向旋转或逆时针方向的指定度数。正值（如90deg）顺时针旋转元素，负值（例如-90度）则逆时针旋转元素。我发送的代码把它写成一样与你有你写的代码

在HTML文件中-webkit-后命名为你写的：

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

来源

2017-03-09 06:05:08 Gunjan

你想说什么@gunjan，图像应该旋转，当有人点击它，而不是悬停 – Harish

荫说，图标，你想旋转也只会旋转时，有人会点击该图标，否则，如果你想我可以使用JavaScript功能也

来源

2017-03-09 06:37:45 Gunjan

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

回答

相关问题