• 将<input> Package 为<label>
• <label>将具有文本，<input>将具有透明背景。
• <label>占据较低的“层”，并充当<input>的边界。将position: relative分配给<label>，将position: absolute; z-index: 1; top: 0; left: 0;分配给<input>，使其位于<label>的“上方”。

label {
  display: block;
  position: relative;
  width: max-content;
  padding: 0.75em 0 0.25em 0.75em;
  margin: 1rem 0;
  text-align: center;
  line-height: 0.5rem;
  vertical-align: sub;
  color: rgba(0, 0, 0, 0.4);
}

input {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  padding: 0.25em 0.5em;
  font: inherit;
  line-height: 1;
  background: transparent;
}

.top {
  padding-bottom: 1em;
  line-height: 1.5;
}

<label>This text belongs to the &lt;label&gt;<input></label>
<label class="top">Having the text in the middle is messy<input></label>

CSS是你实现这个的首选。使两个div的位置都是绝对的，并且确保它们有相同的绝对组件。
This link具有类似的实现。