在输入字段内输入文本重叠按钮

Question

我正在尝试使用 React 中的 <input /> 字段创建一个输入字段，并使用情感对其进行样式设置。在输入字段的右侧有两个按钮，如下所示：

按钮使用 position:absolute 定位。这使得文本和按钮重叠：

有谁知道如何阻止文本到达按钮所在的区域，即使它们是使用情感定位的绝对位置？

Answer 1

一个简单的方法 是将 padding-right 添加到输入，其值等于或大于按钮的宽度。

更好的方法 是像 Boostrap 的输入组一样创建它：https://getbootstrap.com/docs/4.5/components/input-group/#button-addons

在那种情况下：

<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username with two button addons" aria-describedby="button-addon4">
  <div class="input-group-append" id="button-addon4">
    <button class="btn btn-outline-secondary" type="button">Button</button>
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
</div>

您可以像隐藏输入样式但向父元素添加边框那样设置样式。

.input-group { 
  display: flex;
  align-items: center;
  padding: .25rem;
  border: 1px solid #ddd;
  border-radius: .25rem;
}

.input-group > .form-control { 
  flex: 1 1 auto;
  border: 0;
  background: transparent;
  padding: 0 .25rem;
}

.input-group-append {
  flex: 0 0 auto; 
  display: flex;
  align-items: center;
}

.input-group-append > .btn {
  margin: 0;
}

完整示例：https://codepen.io/emendelski/pen/WNxyEXb

在输入字段内输入文本重叠按钮

Input text overlapping buttons inside input field

css

input

overlap

emotion

reactjs