在文本区域内保持填充

Question

在我的文本区域内，我希望保持距顶部30像素的填充。

textarea {
    display: block;
    width: 300px;
    height: 50px;
    padding-top: 30px;
}

但是，一旦在文本区域中填充了文本并且内容开始滚动。不再保留填充。

http://jsfiddle.net/w47wbq77/

当您运行此小提琴时，最初会注意到从顶部（文本区域的内部）保留了填充。但是，当您超过150个字符时，填充就消失了。

有什么解决办法吗？

Answer 1

看起来 textarea 元素添加了填充，但文本在填充区域中仍然可见。我还没有真正找到一个好的解决方案，所以我想出了一个解决方法，使用边框和轮廓的组合来模仿文本区域内的填充：

textarea {
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-right: 0px solid transparent;
    border-left: 0px solid transparent;
    outline: 1px solid #dadcde;
}

顶部和底部透明边框是实际的填充。它们在文本和文本区域之间添加了额外的空间。

左右透明边框可防止由于浏览器中计算和绘制边框的方式而留下边框伪影。

轮廓是文本区域的实际可见边框，并替换 border 属性。

这是一个jsFiddle 示例来展示它是如何工作的

Answer 2

我将从文本区域中删除所有样式，并将其包装在看起来像文本区域的div中

.wrapper { 
  border: 1px solid #aaa; 
  padding-top: 30px; 
}

textarea { padding: 0 }

您可能不得不摆弄边框半径等，但这也许可以做到