具有固定内占位符的textarea

Question

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

<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;