文本输入焦点上的迷你工具栏

Question

我想在焦点文本输入的顶部放置一个迷你工具栏（下面的模型图片）。 minitoolbar 请帮助我 css 的跨度或 div 将其自身置于文本输入字段的全长之上。

minitoolbar

Answer 1

可以通过将您的输入和文本包含在包装器中来实现，使文本位置成为绝对位置并将其与 input.Then 的宽度对齐，只在输入焦点上显示文本。此处演示 https://jsfiddle.net/q3g4db8u/

<form>
  <div class="field">
    <input type="text" name="value">
    <span>This is my tooltip</span>
  </div>
</form>

.field {
  position: relative;
  margin-top: 20px;
  display: inline-block;
}

span {
  position: absolute;
  top: -100%;
  width: 100%;
  background: #ddd;
  display: none;
}

input:focus ~ span {
  display: block;
}