html - 在滚动文本区域中保持恒定的填充

标签 html css textarea

我正在设计一个文本区域,左上角有一个图标。为了防止文本进入图标区域,文本区域被填充:

padding: 35px 10px 10px 10px;

at the top

但是,当文本数量溢出文本区域时,文本会进入填充区域。

overflow text

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

最佳答案

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

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行只是为了相同渐变的跨浏览器应用程序.. 您可以尝试一下它以获得您想要的确切效果..

你觉得怎么样? :)

关于html - 在滚动文本区域中保持恒定的填充,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24161497/

相关文章:

javascript - Jquery Mobile 可折叠内容字体大小

html - 在移动设备上有趣的网站

javascript - Textarea - 获取每一行,查找换行符

java - 查看 GWT HTML 源代码?

html - html 格式的条目 "action=' ?'"是什么意思?

html - 网格 960 调整大小后占据整个宽度

javascript - 允许 textarea resize 缩小(不仅仅是增长)元素的原始/默认大小

java - textarea Wicket 的样式文本

javascript - Selectize.js:使用默认值填充

javascript - 在没有克隆的情况下复制跨度?