javascript - Caret Sensurround by circle CSS

Question

我需要为 bootstrap 下拉菜单设计我自己的主题:我想要像下图这样的东西，我需要在圆圈内显示我的插入符号!

<div class="btn-group" uib-dropdown>
<button id="single-button" type="button" class="btn btn-primary mySetting" uib-dropdown-toggle ng-disabled="disabled">
Relative Difference <span class="caret"></span>
</button>
      <ul class="uib-dropdown-menu" role="menu" aria-labelledby="single-button">
          <li role="menuitem"><a href="#">Action</a></li>    
   </ul>
</div>

这是我用于更改下拉菜单颜色的 .less 文件；我的问题是如何更改插入符号以使其位于圆圈内？

.btn.mySetting {
  background: #e1e6e4;
  color: #25373e;
}
.btn.mySetting:focus, .btn.mySetting:active, .open > .dropdown-toggle.btn{
  background: #b2babb !important;
  color: #25373e !important;
}

Answer 1

您可以只为插入符号创建一个包装器并根据需要设置样式。

简单示例:

<div class="caretCircle"><span class="caret"></span></div>

.caretCircle {
    display:inline-block;
    height:1.5em;
    width:1.5em;
    background-color:white;
    border-radius:50%;
}

实例here .