如何通过CSS在文本区域的右下角添加图标？

Question

我需要在某些文本区域的右下角显示一个“回车”图标，以表示用户可以按回车键来处理他的输入。它应该是这个样子：。如何实现呢？它必须适用于多种大小的文本区域，因此我更喜欢一些灵活的方法而不是使用position:absolute。

- Ali

---

我知道这将通过background-position以某种方式完成，但我不确定如何将图标显示在文本区域内。 - Ali

Answer 1

使用background-position: bottom right和背景图片就可以实现该效果：http://jsfiddle.net/ybG53/ 这样做应该可以达到效果，除非您不想使用背景图片。

- KaeruCT

Answer 2

这里有一种方法，将文本区域包裹在一个容器中，并在伪元素上使用绝对定位来绘制图像。 伪元素似乎不能用于文本区域。

<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/

- Daniel Imms