screen_rotation
Copied to Clipboard
<!DOCTYPE html> <html lang="en"> <head> <title>Input Field</title> <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: none; } .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> </head> <body> <div class="input-container"> <input type="text" placeholder=""> <span class="placeholder">Add Annual Pay</span> <span class="dollar-sign">$</span> </div> <script> const inputFields = document.querySelectorAll('.input-container input'); inputFields.forEach(inputField => { inputField.addEventListener('focus', function () { const dollarSign = this.nextElementSibling.nextElementSibling; dollarSign.style.display = 'inline-block'; }); inputField.addEventListener('blur', function () { const dollarSign = this.nextElementSibling.nextElementSibling; if (this.value === '') { dollarSign.style.display = 'none'; } }); }); </script> </body> </html>