html - 文本区域 100% 宽度带边距

Question

我正在尝试像这样在右侧显示带有图标的文本区域:

textarea 值始终设置为 100%，并且需要跨过全屏宽度减去不同设备上的图标宽度。问题是图标被截断，因为 textarea 占用了所有空间。

我喜欢使用 calc() 函数(减去 100% - 图标宽度)但我们需要支持早期版本的 android 和 iOS。

我绝对可以将图标跨度定位到右侧，但它不能覆盖文本区域，因为滚动条可能出现在文本区域中。我希望在 textarea 的右侧添加边距和边框框，这样在 textarea 仍然占据 100% 宽度的情况下就有空间适合图标。这没有按预期工作。

除了添加/删除类之外，我无法更改 HTML 结构。请参阅下面的 fiddle 。

<div>
     <textarea></textarea>
     <span class="icon-container">
         <span class="icon"></span>
     </span>
</div>

http://jsfiddle.net/3UZGK/2/

谢谢你的帮助

Answer 1

你可以给容器一些 padding-right http://jsfiddle.net/3UZGK/8/

.container {
    padding-right: 32px;
}