我想在焦点输入的文本上方放置一个微型工具栏(下面的模型图片)。
minitoolbar
请使用span或div的css来帮助我,以将其自身放置在文本输入字段全长的顶部。

minitoolbar

最佳答案

可以通过将输入和文本包含在包装中,使文本位置为绝对位置并将其与输入的宽度对齐来实现,然后仅在输入焦点上显示文本。在此处演示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;
}

关于css - 文本输入焦点上的迷你工具栏,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/35596932/

10-12 07:39
查看更多