ドロップダウン内で矢印のように動作するカスタムイメージを回転する

Question

オンラインのチュートリアルに続いて、ブラウザのデフォルトのドロップダウン選択矢印を自分のイメージに置き換えるのに役立ちました。これは正常に機能しており、例hereが表示されます。

.headerDropdown { 
    border-radius: 6px; 
    border: 2px solid #d4d4d4; 
    height: 34px; 
} 

.headerDropdown select { 
    height: 34px; 
    line-height: 34px; 
    padding-left: 10px; 
    padding-right: 5px; 
    margin-right: 20px; 
    font-size: 16px; 
    border: 0 !important; /*Removes border*/ 
    -webkit-appearance: none; /*Removes default chrome and safari style*/ 
    -moz-appearance: none; /*Removes default style Firefox*/ 
    background: url("http://enyojs.com/enyo-2.5.1/lib/moonstone/images/caret-black-small-up-icon.png") right no-repeat; 
    width: 100%; 
    background-position: 98% 50%; 
    background-color: white; 
    text-indent: 0.01px; 
    text-overflow: ""; 
    transition: 0.2s; 
} 

.headerDropdown select::-ms-expand { 
    display: none; 
} 

.headerDropdown select::-moz-focus-inner { 
    border: 0; 
    padding: 0; 
} 

.rotateCaret { 
    -webkit-transform: rotate(180deg); 
    -moz-transform: rotate(180deg); 
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); 
} 

画像が少し回転しているので、画像を回転させたいときにドロップダウンを開いています。私は問題を扱っている多くの例をオンラインで見つけましたが、実際には別のオブジェクト（イメージ、例えば、私の場合のようなバックグラウンドの属性ではありません）のときにすべて解決します。

$("#mainnavigation").on("click", function() { 
    $(this).toggleClass("rotateCaret"); 
}); 

私の質問は - ドロップダウン全体に影響を与えずにドロップダウン選択画像をどのように回転できますか？私はコンテンツの隣にあるイメージだけが必要です。

ありがとうございます！

PS。イメージの私の貧しい選択を無視して、私は例としてのみそれを使用しました。

Answer 1

キャレットに別の要素を追加し、別々に回転させます。あなたはカスタムCSS animationを作成し、望むように操作することができます。

https://jsfiddle.net/johnniebenson/xajzuxn4/