在下拉菜單中旋轉自定義圖像充當箭頭

我在線教程幫助我用自己的圖像替換了瀏覽器的默認下拉選擇箭頭。這工作得很好，你可以看到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。忽略我糟糕的形象選擇，我僅以此爲例。

來源

2016-05-20 webbul

爲脫字符添加另一個元素並分別旋轉它。您可以創建自定義CSS animation並根據需要對其進行操作。

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

來源

2016-05-20 16:30:43 johnniebenson

使用你的偉大的建議，我解決了它（和動畫吧）幾乎相同，而無需使用關鍵幀。我認爲關鍵幀應該適用於更復雜的場合。另外，請注意，關閉時不會回放動畫。但是，這是一個很好的答案，它幫助我解決了這個問題，並且我認爲它是正確的。謝謝:) – webbul

另外，我不得不照顧的另一件事是，當你點擊新創建的插入符後，無法打開下拉菜單。 – webbul

在下拉菜單中旋轉自定義圖像充當箭頭

回答

相關問題