Trang chủ
Inut email
Save
Settings
Sign Up
Log In
Save
Settings
HTML
Copy
<div class="input-with-icon"> <input class="input" type="text" placeholder="fastui@gmail.com" /> <span class="icon"> <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 512 512" > <path d="M0 128C0 92.65 28.65 64 64 64H448C483.3 64 512 92.65 512 128V384C512 419.3 483.3 448 448 448H64C28.65 448 0 419.3 0 384V128zM32 128V167.9L227.6 311.3C244.5 323.7 267.5 323.7 284.4 311.3L480 167.9V128C480 110.3 465.7 96 448 96H63.1C46.33 96 31.1 110.3 31.1 128H32zM32 207.6V384C32 401.7 46.33 416 64 416H448C465.7 416 480 401.7 480 384V207.6L303.3 337.1C275.1 357.8 236.9 357.8 208.7 337.1L32 207.6z" ></path> </svg> </span> </div>
CSS
Copy
.input-with-icon { position: relative; } .input-with-icon .input { padding: 15px 15px 15px 46px; border-radius: 6px; border: 1px solid #9ca3af; transition: border-color 0.2s linear, box-shadow 0.2s linear; } .input-with-icon .input:focus { border-color: #1dc071; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); } .input-with-icon .input:focus + .icon { color: #1dc071; } .input-with-icon .icon { position: absolute; top: 50%; left: 16px; transform: translateY(-50%); color: #9ca3af; transition: color 0.2s linear; pointer-events: none; } .input-with-icon .icon svg { height: 24px; }
JS
Copy