Why this code is not working?
I was trying to make in input with awesome animation in html and css. Actually When the user clicks on the input the placeholder should go up and changes colour with transitions. This is the code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Login</title> </head> <style> *{ margin: 0; padding: 0; font-family: Nunito; box-sizing: border-box; } body{ height: 100vh; display: flex; align-items: center; justify-content: center; } .parent{ height: 50px; width: 250px; position: relative; } .parent label span{ position: absolute; bottom: 0%; left: 10px; font-size: 20px; font-weight: 500; transition: 0.3s ease; } .parent label input{ height: 100%; width: 100%; padding-top: 20px; padding-left: 10px; border: none; outline: none; border-bottom: 1px solid black; font-size: 18px; font-weight: 500; color: #00a3e8; } .parent label input:focus ~ .parent label span, .parent label input:valid ~ .parent label span { position: absolute; bottom: 100%; color: #00a3e8; } </style> <body> <div class="parent"> <label for="user"> <span>Username</span> <input type="text" name="user"> </label> </div> </body> </html>
Often have questions like this?
Learn more efficiently, for free:
