如何将图标放在textarea中？

Question

我想将此图标放在下面的图像的文本区域中。

这是我的代码：

<div class="form-group" style="text-align: right;width: 100%;">
          <textarea row=100 cols=60
                    type="text"
                    id="input"
                    formControlName="txt"
                    placeholder="متن ...">
          </textarea>
          <span class="icon-user"></span>
        </div>

有人知道我该怎么做吗？

Answer 1

您可以使用css这样实现。
    .icon-user { position:relative; top: -10px; left: -100px; }
根据需要调整top和left的值。 :)
您可以通过其他方式将position: absolute添加到文本区域和图标。

Answer 2

在CSS中，将两个项目的位置都更改为绝对位置，然后更改左，右，上和下的值，直到图标位于文本区域内。如果要在窗口变小时使其看起来相同，请确保使用百分比而不是像素

Answer 3

这里是示例：https://jsbin.com/laduyemewo/edit?html,css,output

此处的关键更改是将position: relative;设置为父<div class="form-group">，并申请<span class="icon-user"></span>-position: absolute;，其中bottom和{{1} }属性取决于您的尺寸。