Javascript 带有删除按钮的输入字段

我试图让Bootstrap3输入字段在输入的右上角附加一个小的关闭图标

以下是我的尝试：

但这有两个问题：

&时代符号未正确放置在圆中

我试图移动

圆圈，使其位于输入边框上下的中间位置（这有意义吗？）。这可能需要绝对定位或javascript来完成，我不知道

---

您可以使用

btn

类作为样式，并将其与其他类一起定位

<button type="button" class="btn btn-default btn-sm">
  &times;
</button>

&时代；

或

---

请参见图标部分下方的示例：

在您的

btn关闭中

执行以下操作：

.btn-close {
    position: relative;
    top:10px;
    padding: 0;
    display: block;
    background: teal;
    border-radius: 100%;
    width: 12px;
    height: 12px;
    float: right;
    color: #FFF;
    font-size: 12px;
    font-weight: bold;
}

---

最好将输入字段和关闭按钮括在一个div中。检查此项。

一种快速而肮脏的方法是将输入包装在一个div中，将其位置设置为相对，并将图标设置为绝对相对：

---

但是，在使用引导程序时，请尝试查看模式，而不是一路摸索。

您读过这篇文章吗@麦克斯鲍德温，是的，但那不是你想要的样子。理想情况下，按钮的高度不应该与输入的高度相同，它应该更小，并连接到右上角。Muhambi-为了按您所希望的方式定位teal圆，只需将Amin的post中的top属性从10px更改为-5px，就可以将元素“居中”在输入元素的边界上。

.btn-close {
    position: relative;
    top:10px;
    padding: 0;
    display: block;
    background: teal;
    border-radius: 100%;
    width: 12px;
    height: 12px;
    float: right;
    color: #FFF;
    font-size: 12px;
    font-weight: bold;
}