Textarea 100％宽边缘

Question

我正在尝试显示带有右侧图标的textarea，如下所示：

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

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

我绝对可以将图标跨度放在右侧，但由于可能会出现在textarea中的滚动条，因此无法覆盖textarea。我希望在textarea的右边添加一个边距以及边框，这样就有空间来容纳图标，而textarea仍占据100％的宽度。这没有按预期工作。

除了添加/删除类之外，我无法更改HTML结构。请看下面的小提琴。

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

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

感谢您的帮助

Answer 1

你可以给容器一些填充权 http://jsfiddle.net/3UZGK/8/

.container {
    padding-right: 32px;
}

Answer 2

制作一个包含文本框和按钮的<div>，将其设置为100％宽度。

应该解决它

Answer 3

只需将这些添加到相应的元素：

textarea {   
float:left;
}

span.icon-container {
    float:left;
}

检查小提琴：FIDDLE