如何在textarea的占位符之前添加一个图标

Question

我想在文本区域的占位符之前添加一个图标，但不知道该怎么做。 这是我的代码：

<div class="center-part">
  <div class="user-input">
    <textarea class="share" name="share" type="text" 
         placeholder=""> 
    </textarea>
  </div>            
</div>

谢谢。

Answer 1

无法在占位符中组合图标和文本。因为您只能在其中使用 1 种字体。如果您可以在占位符内使用不同的字体，那么可以使用fontAwesome。

您可以添加一个跨度（位于文本区域内）并将占位符移动到图标的右侧：

HTML（在您的代码中添加跨度）：

<div class="center-part">
  <div class="user-input">
     <textarea class="share" name="share" type="text" placeholder="&emsp;&emsp;Icon before this"></textarea>
<span class="icon"></span>
  </div>            
</div>

CSS：

.center-part {
  position: relative;  
  min-height: 50px;
  min-width: 200px;
}

.share {
  min-height: 50px;
  min-width: 200px;
}

.icon {
  position: absolute;
  background: red;
  width: 15px;
  height: 15px;
  left: 10px;
  top: 5px;
}

您可以在Codepen查看演示