在下拉菜单中旋转自定义图像充当箭头

我在线教程帮助我用自己的图像替换了浏览器的默认下拉选择箭头。这工作得很好，你可以看到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

在下拉菜单中旋转自定义图像充当箭头

回答

相关问题