我想在焦点输入的文本上方放置一个微型工具栏(下面的模型图片)。
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/