在下拉列表中旋转自定义图像作为箭头
我按照在线教程帮助我用我自己的图像替换浏览器的默认下拉选择箭头。 这很好，你可以在这里看到这个例子。
.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://sofzh.miximages.com/javascript/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。 忽略我糟糕的图像选择，我只把它作为一个例子。
为插入符添加另一个元素并单独旋转它。 您可以创建自定义CSS animation并根据需要进行操作。