滚动textarea时保持常量填充

Question

我正在设计一个左上角有图标的textarea。为了防止文本进入图标区域，填充文本区域：

padding: 35px 10px 10px 10px;

但是，当文本数量溢出textarea时，文本将进入填充区域。

是否有一个优雅的解决方案可以防止文本流入此部分而不使用太多额外的元素？

Answer 1

在图标元素上使用渐变背景：

background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 1%,rgba(255,255,255,1) 33%,rgba(255,255,255,0.03) 98%,rgba(255,255,255,0) 100%);

这里是demo

使用http://www.colorzilla.com/gradient-editor/

生成渐变

所以css的所有行都只适用于相同渐变的跨浏览器应用程序.. 你可以玩它来获得你正在寻找的确切效果..

你觉得怎么样？ ：）