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

【问题标题】：Mini toolbar on text input focus文本输入焦点上的迷你工具栏
【发布时间】：2016-02-24 08:29:48
【问题描述】：

我想将一个迷你工具栏放置在焦点上的文本输入顶部（下面的样机图片）。 minitoolbar 请帮助我处理 span 或 div 的 css，使其位于文本输入字段的全长之上。

【问题讨论】：

你能告诉我们你到目前为止做了什么吗？
Π √

问题是“工具栏”填充了屏幕的全宽，而不是文本输入的全宽。最好我也想避免使用外部 div（并且只有一个 div 和一个文本输入），但这可能是不可能的？

【解决方案1】：

可以通过将您的输入和文本包含在一个包装器中，使文本位置成为绝对位置并将其与您的输入的宽度对齐来实现。然后只需在输入焦点上显示文本。在这里演示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;
}

【讨论】：