我正在尝试设置select
下拉菜单的样式,以便在到达150px
高度时溢出。问题是,当我应用overflow: auto
属性时,包含指向选择的箭头的伪后元素会消失。
这里我们有代码:
.dropdown-menu{
background-color:#f2f2f1;
min-width: 100px;
border:none;
border-top:5px solid #b4b4b4;
border-radius:0;
>li>a{
font-size: 14px !important;
color:#818181 !important;
&:hover, &:active{
color:#003e59 !important;
}
}
.divider{
height:2px;
margin: 2px 0;
background-color:#cdcccd;
}
&:after {
bottom: 100%;
left: 25%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(136, 183, 213, 0);
border-bottom-color: #b4b4b4;
border-width: 12px;
margin-left: -12px;
}
}
<div class="input-group">
<label>Jurisdiction</label>
<button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
Select Jurisdiction <span class="spacer"></span><span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Jurisdiction 1</a></li>
<li class="divider"></li>
<li><a href="#">Jurisdiction 2</a></li>
<li class="divider"></li>
<li><a href="#">Jurisdiction 3</a></li>
</ul>
</div>