Css 使用三个点跨度触发下拉列表

我使用的是react引导，有一个带插入符号的按钮，可以触发下拉菜单

但是我需要使用垂直的3点，而不是按钮样式

我有一个span，它使用CSS类来表示三个点，但似乎找不到摆脱按钮和插入符号的方法

我现在要说的是：

<Dropdown>
    <Dropdown.Toggle>
      <span className="threedots"></span>
    </Dropdown.Toggle>
    <Dropdown.Menu size="sm" title=""> 
      <Dropdown.Header>Options</Dropdown.Header>
      <Dropdown.Item .... ></Dropdown.Item>
    </Dropdown.Menu>
 </Dropdown>

选择权

---

我只想看到三个点（我将添加鼠标悬停效果）。是否有一种将捕捉用作切换的方法>

您可以通过传递自定义子组件来自定义下拉列表

const CustomToggle=React.forwardRef（{children，onClick}，ref）=>(
));

然后作为自定义切换传递

<Dropdown >
    <Dropdown.Toggle as={CustomToggle}>
    </Dropdown.Toggle>
    <Dropdown.Menu size="sm" title=""> 
      <Dropdown.Header>Options</Dropdown.Header>
      <Dropdown.Item .... ></Dropdown.Item>
    </Dropdown.Menu>
 </Dropdown>

选择权

---

，希望对您有所帮助

插入符号是一个生成的：：after伪元素。只需为下拉列表提供一个父类，然后

display:none

pseudo元素。同样，覆盖按钮样式。@Vishal-听起来不错。但我不是100%确定怎么做按钮部分。你能帮我做伪代码吗？非常好的演示@Alex！如果其他人想知道如何去除悬停时的下划线，请将其添加到css文件：

。下拉a:hover{text-decoration-line:none；}

<Dropdown >
    <Dropdown.Toggle as={CustomToggle}>
    </Dropdown.Toggle>
    <Dropdown.Menu size="sm" title=""> 
      <Dropdown.Header>Options</Dropdown.Header>
      <Dropdown.Item .... ></Dropdown.Item>
    </Dropdown.Menu>
 </Dropdown>