Question

我按照在线教程帮助我更换浏览器＆＃39;默认下拉选择箭头与我自己的图像。这工作正常，您可以看到示例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/

在下拉列表中旋转自定义图像作为箭头

1 个答案: