帶有固定內部佔位符的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;