元素相对于文本输入的位置

Question

我有以下挑战。当用户在输入字段中键入某些内容时，我想显示一个重置按钮，其位置位于输入的右侧。

我无法更改标签，输入，按钮和错误消息的html结构。而且我不想使用浏览器支持。有人有创意如何做到这一点吗？提前谢谢。

label {
  display: block;
}
.btn {
  padding: 10px;
  background-color: green;
  color: #fff;
}
input {
  padding: 10px;
}

<div class="shopping-cart-coupon">
  <div class="form-group">
    <label for="coupon">Coupon</label>
    <input name="coupon" type="text" id="coupon">
    <a id="" style="" class="btn" href=''>Activate</a>
    <span style="display:block;color:red;">Error message</span>
    <a class="reset">x</a>
  </div>
</div>

Answer 1

大纲

用

<div style="display: inline-block;position:relative;">包裹任何您想要保留的东西，就像现在一样。这将创建一个定位上下文，您可以在其中定位任何内容。然后，将重置按钮与position: absolute和所需的偏移量放在您创建的包装器内部和相对于您创建的包装器。

这是一个尝试，但我不确定我是否理解你的场景。

label {
  display: block;
}
.btn {
  padding: 10px;
  background-color: green;
  color: #fff;
}
input {
  padding: 10px;
}
.input-wrapper {
  position: relative;
  display: inline-block;
}
.reset {
  position: absolute;
  right: 3px;
  top: 7px;
}

<div class="shopping-cart-coupon">
  <div class="form-group">
    <label for="coupon">Coupon</label>
    <div class="input-wrapper">
      <input name="coupon" type="text" id="coupon">
      <a class="reset">x</a>
    </div>
    <a id="" style="" class="btn" href=''>Activate</a>
    <span style="display:block;color:red;">Error message</span>
  </div>
</div>

Answer 2

.form-group {
  position: relative;
}
label {
  display: block;
}
.btn {
  padding: 10px;
  background-color: green;
  color: #fff;
}
input {
  padding: 10px;
}
.reset {
  margin-left: -20px;
  margin-top: 10px;
  position: absolute;
}

<div class="shopping-cart-coupon">
  <div class="form-group">
    <label for="coupon">Coupon</label>
    <input name="coupon" type="text" id="coupon">
    <a class="reset">x</a>
    <a id="" style="" class="btn" href=''>Activate</a>
    <span style="display:block;color:red;">Error message</span>
  </div>
</div>