Javascript 用圆圈CSS环绕的插入符号传感器

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

---

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

快速示例：

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

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

caretCircle先生{
显示：内联块；
高度：1.5em；
宽度：1.5em；
背景色：白色；
边界半径：50%；
}

---

活生生的例子。

问题是我不想为它设置特定的大小，我想对文本大小和按钮大小做出响应。我知道em在某种程度上是相对大小的，但如果我将它们设置为1 em，它会在顶部显示一个圆圈。如果你想让它对文本大小做出响应，唯一通过CSS实现的方法就是使用ems。其思想是，您可以使用您想要的效果所需的任何属性来设置此包装器的样式。您还可以将CSS应用于包含在中的插入符号元素。它可以得到你想要的任何花式或轻。您从来没有为外观定义任何特定的标准，只是一个一般的准则，所以我提供了最低标准。下面是一个文本大小响应插入符号的粗略示例，您可以根据需要调整位置/大小等。

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

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

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