如何通过CSS在textareas的右下方添加一个图标？

Question

我需要输入＆＃39;输入＆＃39;图标显示在某些textareas的右下角，表示用户可以按Enter键处理他的输入。这是它需要看的方式：

如何做到这一点？它必须适用于多种尺寸的textareas，所以我更喜欢一些灵活而不是通过位置完成的东西：绝对

Answer 1

使用background-position: bottom right和背景图片可以解决问题：http://jsfiddle.net/ybG53/

这应该有效，除非你想在没有背景图像的情况下这样做。

Answer 2

这是一种方法，在包装器中包围textarea，并在伪元素上使用绝对定位来绘制图像。伪元素似乎不适用于textareas。

<div id="container">
    <textarea></textarea>
</div>

#container {
    position:relative;
    display:inline-block;
}

#container:before {
    position:absolute;
    display:block;
    right:0%;
    bottom:0%;
    width:10px;
    height:10px;
    content:"";
    background-color:#F00;
}

http://jsfiddle.net/kafNg/1/