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

Question

我需要在某些文本区域的右下角显示一个“Enter”图标，以指示用户可以按 Enter 来处理他的输入。这就是它需要的样子：

如何才能做到这一点？它必须适用于多种大小的文本区域，所以我更喜欢灵活的东西，而不是通过位置：绝对

Answer 1

使用background-position: bottom right背景图片就可以了：http: //jsfiddle.net/ybG53/

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

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/