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.
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="  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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.