html - CSSを介してテキストエリアの右下にアイコンを追加するにはどうすればよいですか？

Question

一部のテキスト領域の右下に「Enter」アイコンを表示して、ユーザーがEnterキーを押して入力を処理できることを示す必要があります。これはそれがどのように見える必要があるかです：

これはどのように行うことができますか？複数のサイズのテキストエリアで機能する必要があるため、柔軟性があり、position：absoluteを介して実行されないものをお勧めします。

Answer 1

background-position: bottom rightと背景画像を使用すると、トリックが実行されます：http: //jsfiddle.net/ybG53/

背景画像なしでそれをしたいのでなければ、それはうまくいくはずです。

Answer 2

これが1つの方法で、テキスト領域をラッパーで囲み、疑似要素の絶対位置を使用して画像を描画します。疑似要素はtextareaでは機能しないようです。

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