如何在文本框/文本区域中放置叠加图标

Question

我有一个textarea，我希望允许用户点击它，点击后我想向他们展示一个表单。

根据我对UI开发的了解，可以使用jquery轻松完成点击和显示表单。 但是如何在textbox / textarea中放置一个图标？像这样的东西

我试图搜索这个演示，但找不到任何演示。

Answer 1

下面

<textarea row=100 cols=60></textarea>
<span class="ui-icon ui-icon-arrowthick-1-n" id="arrow"></span>

CSS

#arrow{
    margin-left:-20px;
    position:relative;
}
textarea{
    float:left;
}

看到它的实际效果 http://jsfiddle.net/N99Vs/

Answer 2

你去了，我已经为你更新了jsfiddle。 http://jsfiddle.net/WTpPH/115/ 基本上

<强> HTML

<div>
<textarea></textarea>
<a href='#'>c</a>
</div>

<强> CSS

div { position:relative; width: 200px; }
textarea { display: inline-block; width: 100%; height: 200px }
a{
    background-color:red;
    position: absolute;
    right: 2px;
    bottom: 8px;
}
textarea + a {
    display: none;
}
textarea:hover + a {
    display: block;
}
textarea + a:hover {
    display: block;
}