Trang chủ
Input UI v1
Save
Settings
Sign Up
Log In
Save
Settings
HTML
Copy
<div class="input-label"> <input type="text" class="input" placeholder=" " id="name" /> <label for="name" class="label">Name</label> </div>
CSS
Copy
.input-label { display: inline-block; position: relative; width: 100%; } .input { border: 1px solid #9ca3af; border-radius: 6px; width: 100%; padding: 15px; transition: 0.25s ease; } .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); } /* Khi input có giá trị hoặc focus, label nổi lên */ .input:not(:placeholder-shown) + .label, .input:focus + .label { top: 0; left: 11px; padding: 0 10px; font-size: 14px; font-weight: 500; color: #1dc071; background: #fff; } /* Label mặc định */ .label { position: absolute; top: 50%; left: 21px; transform: translateY(-50%); color: #9ca3af; user-select: none; pointer-events: none; background: #fff; transition: 0.25s ease; }
JS
Copy