时间戳

首页 > 解决方案 > 如何使下拉菜单透明，只有可见项目是按钮内的箭头和右边框？

html - 如何使下拉菜单透明，只有可见项目是按钮内的箭头和右边框？

问题描述

在这里我需要下拉按钮是透明的，但如果我background:transparent;只做可见的东西是边框，我需要它是出现在下拉按钮和右边框内的箭头图标。这是代码

<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Regular</a>
<a class="dropdown-item" href="#">Link 2</a>
</div>
</div>

在此处输入图像描述 <<这就是我需要的

标签： htmlcssbootstrap-4

解决方案

像这样的东西？

.dropdown-toggle {
  background:transparent;
  color: black;
  border-width: 0 1px 0 0;
}
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Regular</a>
<a class="dropdown-item" href="#">Link 2</a>
</div>
</div>

这里有引导程序：https ://codepen.io/anon/pen/EGZNKd

箭头是白色的，所以当你让背景透明时，如果后面的背景也是白色的，你就看不到它了。所以我把它变成黑色以使其可见。

注意：这个 css 选择器会改变所有的下拉按钮，所以你可能想让它更具体。

编辑：更新以显示右边框。

推荐阅读