带有内容的引导可滚动下拉列表：after

Question

我正在尝试使用 Bootstrap 构建一个可滚动的下拉菜单，顶部边缘有一个小三角形。

我使用 :after 选择器来设置三角形的样式，它仅在下拉菜单不可滚动时才有效。

一旦我将下拉菜单设置为可滚动， :after 类就会被忽略。

这是我为可滚动菜单定制的 CSS：

.scrollable-menu {
    height: auto;
    max-height: 500px;
    overflow-x: hidden;
}
.scrollable-menu:after {
    content:"";
    width: 0; 
    height: 0; 
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #e3c7aa;
    position:absolute;
    top:-10px;
    right:30px;
 }

Answer 1

检查以下链接是否适合您。

Fiddle

.scrollbar{ background-color:lightgray;height: auto;max-height: 200px;overflow-x: hidden;overflow-y:scroll; min-width: 135px;margin-top: 0px; }
#ex4::-webkit-scrollbar { width:10px;background-color:#cccccc; } 
#ex4::-webkit-scrollbar-thumb { background-color:#B03C3F;border-radius:10px; }
#ex4::-webkit-scrollbar-thumb:hover { background-color:#BF4649;border:1px solid #333333; }
#ex4::-webkit-scrollbar-thumb:active { background-color:#A6393D;border:1px solid #333333; }

Updated fiddle

您可以查看更新后的链接，让我知道它是否适合您。