Question

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

我无法更改标签，输入，按钮和错误消息的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>

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

2 个答案: