带有删除按钮的输入字段

Question

我正在尝试让一个bootstrap 3输入字段在输入的右上角附加一个小的关闭图标。

这是我的尝试：https://jsfiddle.net/8konLjur/

但是有两个问题：

1. ×符号未正确放置在圆圈中。

2. 我正在尝试移动<a></a>圈，使其位于下方和上方输入边框的中间位置（这有意义吗？）。这可能必须使用绝对定位或javascript来完成，我不知道。

Answer 1

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

DEMO

<div style="position: relative"> <!-- absolute relative to parent --> </div>

但是，在使用bootstrap时，请尝试查看模式而不是黑客攻击。

Answer 2

您可以将btn类用于样式，并将其与其他类一起定位。

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

或

<button type="button" class="btn btn-default btn-sm">
  <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>

请参阅图标部分下方的示例：http://getbootstrap.com/components/#glyphicons

Answer 3

在btn-close中进行以下操作：

.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中。结帐DEMO。