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

Question

I'd like to add an icon right before the placeholder in a textarea but don't know how to do it. Here is my code:

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

Thank you.

Answer 1

It is not possible to combine an icon and text in a placeholder. Because you are only able to use 1 font in it. If you could use different fonts inside the placeholder then this would be possible by using fontAwesome .

You can add a span (positioned inside the textarea) and shift the placeholder to the right of the icon by doing this:

HTML (added span in your code):

<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;
}

You can see a demo at Codepen