How to Add Icon in Placeholder in Html
In this tutorial, we will learn how to add a prefix icon to an input type field using HTML and CSS. A prefix icon is a small image that appears before the text input, such as a dollar sign for a currency field or a magnifying glass for a search field. Adding a prefix icon can make your input fields more attractive.
written
reviewed
updated
Thanks for your feedback!
Your contributions will help us to improve service.
Add Icon in Placeholder Example
Copied to Clipboard
xxxxxxxxxx<style> .input-container { position: relative; margin-top: 20px; } .input-container input { border: 1px solid #adadad; width: 300px; padding: 12px; border-radius: 4px; font-size: 16px; color: #525252; background-color: #ffff; padding-left: 26px; outline: none; } .placeholder { position: absolute; top: 50%; left: 10px; transform: translateY(-50%); color: #7a7a7a; font-size: 17px; padding: 0px 5px; background-color: #ffff; pointer-events: none; transition: top 0.3s, font-size 0.3s; } .dollar-sign { position: absolute; left: 14px; top: 50%; font-size: 17px; transform: translateY(-50%); color: #525252; margin-right: 8px; pointer-events: none; display: block; } .input-container input:focus { border: 2px solid #525252; } .input-container input:focus+.dollar-sign { display: inline-block; } .input-container input:focus+.placeholder, .input-container input:not(:placeholder-shown)+.placeholder { top: 0; font-size: 14px; color: #525252; }</style><body> <div class="input-container"> <input type="text" placeholder=""> <span class="placeholder">Add Annual Pay</span> <span class="dollar-sign">$</span> </div></body>
Ad