主页 / coding / 问题 / 78358733
Accepted
latexforti
Asked: 2024-04-20 23:20:10 +0800 CST

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

  • 772

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

我当前的代码在链接中：

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;}

谢谢 在此输入图像描述

html

1 个回答

  1. Best Answer

    为此，您应该使用诸如或 之类的CSS-pseudo元素。此外，使用伪元素，使其确实影响点击功能。beforeafterpointer-events: none

    看这个例子：

    .flagdropdown::after {
  content: '';
  position: absolute;
  top: 7px;
  right: 5px;
  width: 0px;
  height: 0px;
  border-top: 5px solid black;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid transparent;
  pointer-events: none;
}

    注意：边框只是为了创建箭头图标的三角形形状

    输出：

    在此输入图像描述

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

    • 1

相关问题