具有固定内部占位符的文本区域

Question

我正在尝试创建一个在左上角具有固定标题的文本区域。到目前为止，我有以下内容：

<div style="position: relative">
    <div style="position:absolute; top:3px; left:3px; font-size:9px; line-height:10px">My Notes:</div>
    <textarea rows="9" style="padding-top:12px"></textarea>
</div>

问题是，如果 textarea 包含足够多的可滚动文本，则 textarea 中的文本将与标题重叠。

是否可以通过一种固定的顶部填充来避免这种情况？

Answer 1

除非禁用滚动功能，否则无法使用 CSS 阻止它向后滚动。为了让它看起来更好，只需添加更多的 CSS，最重要的是，background。将 width 设置为 100% 并添加一些 padding 使其适合。最后，top: 1px，所以您仍然可以看到表单的顶部边框。

position:absolute; 
top:1px; 
left:3px; 
font-size:9px; 
line-height:10px;
background: #fff;
width: 100%;
padding: 5px;