将向下箭头添加到标志下拉菜单中

Question

我想在下拉菜单中添加向下箭头？

链接中我当前的代码：

https://jsfiddle.net/bvotcode/qe6L3bxr/1/

我的CSS：

.flagdropdown { position: relative; cursor: pointer; border: 0.5px solid gray; width: 110px; position: absolute; content: "▼"; left: 50%; top: 10%; transform: translate(-50%, 50%);}
.flagdropdown-options { position: absolute; width: 100%; z-index: 10; background: #fff; }
.flagdropdown-option { padding: 5px; }
.flagdropdown-option:hover { background-color: #f0f0f0; }
.flagdropdown-position-1 {object-position: 5px; top: 55%; border-radius: 0.25rem;}

谢谢你

Answer 1

为此，您应该使用

CSS-pseudo

元素，例如

before

或

after

。 此外，在伪元素上使用

pointer-events: none

，这样它确实会影响点击功能。

看这个例子：

.flagdropdown {
  position: relative;
  cursor: pointer;
  border: 0.5px solid gray;
  width: 110px;
  position: absolute;
  content: "▼";
  left: 50%;
  top: 10%;
  transform: translate(-50%, 50%);
}

.flagdropdown::after {
  content: '⌄';
  position: absolute;
  top: -6px;
  right: 2px;
  width: 10px;
  height: 10px;
  pointer-events: none;
}

.flagdropdown-options {
  position: absolute;
  width: 100%;
  z-index: 10;
  background: #fff;
}

.flagdropdown-option {
  padding: 5px;
}

.flagdropdown-option:hover {
  background-color: #f0f0f0;
}

.flagdropdown-position-1 {
  object-position: 5px;
  top: 55%;
  border-radius: 0.25rem;
}

输出：

工作中的jsfiddle： https://jsfiddle.net/py2wdt1L/6/