クリックすると選択ボックスのキャレットアイコンを回転させる方法は？

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>

を書かれているコードです回転した。アイコンのみをどのように回転させるのですか？回転値と

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

、要素が時計回りまたは反時計度の指定された数により回転します。 90degなどの正の値は要素を時計回りに回転させ、-90degなどの負の値は反時計回りに要素を回転させます。

：あなたがこれを行うCSSで

：私はコードを送信しています はあなたがあなたが書いたHTMLファイルにこのコード

を書く-webkit-後に与えていた名前と同じようにそれを書きます

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

Answer 3

IAMのは、誰もがあなたがしたい場合は、そうでない場合は、このコードを試してみてください一度だけ、私はここに