Как сделать анимацию что бы при нажатии на input, label поднимался а после введения текста не возвращался?
У меня есть страница с регистрацией, простая, ничего сложного. В полях для ввода логина и пароля есть Теги "label" в котором написано Email и Password, при нажатии на поля эти теги должны подниматься вверх, как бы открывая место для ввода текста и должны остаться там, но Email снова возвращается в исходное положение тем самым портя всё, а Password работает так как и должен. Как мне это решить? Буду благодарен если поможете!
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <section> <div class="from_box"> <div class="from_value"> <form action=""> <h2>Login</h2> <div class="inputbox"> <ion-icon name="mail-outline"></ion-icon> <input type="email" required> <label for="">Email</label> </div> <div class="inputbox"> <ion-icon name="lock-closed-outline"></ion-icon> <input type="password" required> <label for="">Password</label> </div> <div class="forget"> <label for=""><input type="checkbox">Remember me <a href="#">Forget Password</a></label> </div> <button>Log in</button> <div class="regiser"> <p>Don't have an account <a href="#">Register</a></p> </div> </form> </div> </div> </section> <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script> <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script> </body> </html> |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <section> <div class="from_box"> <div class="from_value"> <form action=""> <h2>Login</h2> <div class="inputbox"> <ion-icon name="mail-outline"></ion-icon> <input type="email" required> <label for="">Email</label> </div> <div class="inputbox"> <ion-icon name="lock-closed-outline"></ion-icon> <input type="password" required> <label for="">Password</label> </div> <div class="forget"> <label for=""><input type="checkbox">Remember me <a href="#">Forget Password</a></label> </div> <button>Log in</button> <div class="regiser"> <p>Don't have an account <a href="#">Register</a></p> </div> </form> </div> </div> </section> <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script> <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script> </body> </html>
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@900&family=Poppins:wght@200;300;400;600;700;800;900&display=swap'); *{ margin: 0; padding: 0; font-family: "poppins", sans-serif; } section{ display: flex; justify-content: center; align-items: center; min-height: 100vh; width: 100%; background: url(tt.jpg) no-repeat ; background-position: center; background-size: cover; } .from_box{ position: relative; width: 400px; height: 450px; background: transparent; border: 2px solid rgba(255, 255, 255, 0.5); border-radius: 20px; display: flex; justify-content: center; align-items: center; } h2{ font-size: 2em; color: #fff; text-align: center; } .inputbox{ position: relative; margin: 30px 0; width: 310px; border-bottom: 2px solid #fff; } .inputbox label{ position: absolute; top: 50%; left: 5px; transform: translateY(-50%); color: #fff; font-size: 1em; pointer-events: none; transition: .5s; } input:focus ~ label, input:valid ~ label{ top: -5px; } .inputbox input{ width: 100%; height: 50px; background: transparent; border: none; outline: none; font-size: 1em; padding: 0 35px 0 5px; color: #fff; } .inputbox ion-icon{ position: absolute; right: 8px; color: #fff; font-size: 1.2em; top: 20px; } .forget{ margin: -15px 0 15px; font-size: .9em; color: #fff; display: flex; justify-content: center; } .forget label input{ margin-right: 3px; } .forget label a{ color: #fff; text-decoration: none; } .forget label a:hover{ text-decoration: underline; } button{ width: 100%; height: 40px; border-radius: 40px; background: #fff; border: none; outline: none; cursor: pointer; font-size: 1em; font-weight: 600; } .regiser{ font-size: .9em; color: #fff; text-align: center; margin: 25px 0 10px; } .regiser p a{ text-decoration: none; color: #fff; font-weight: 600; } .regiser p a:hover{ text-decoration: underline; } |
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@900&family=Poppins:wght@200;300;400;600;700;800;900&display=swap'); *{ margin: 0; padding: 0; font-family: "poppins", sans-serif; } section{ display: flex; justify-content: center; align-items: center; min-height: 100vh; width: 100%; background: url(tt.jpg) no-repeat ; background-position: center; background-size: cover; } .from_box{ position: relative; width: 400px; height: 450px; background: transparent; border: 2px solid rgba(255, 255, 255, 0.5); border-radius: 20px; display: flex; justify-content: center; align-items: center; } h2{ font-size: 2em; color: #fff; text-align: center; } .inputbox{ position: relative; margin: 30px 0; width: 310px; border-bottom: 2px solid #fff; } .inputbox label{ position: absolute; top: 50%; left: 5px; transform: translateY(-50%); color: #fff; font-size: 1em; pointer-events: none; transition: .5s; } input:focus ~ label, input:valid ~ label{ top: -5px; } .inputbox input{ width: 100%; height: 50px; background: transparent; border: none; outline: none; font-size: 1em; padding: 0 35px 0 5px; color: #fff; } .inputbox ion-icon{ position: absolute; right: 8px; color: #fff; font-size: 1.2em; top: 20px; } .forget{ margin: -15px 0 15px; font-size: .9em; color: #fff; display: flex; justify-content: center; } .forget label input{ margin-right: 3px; } .forget label a{ color: #fff; text-decoration: none; } .forget label a:hover{ text-decoration: underline; } button{ width: 100%; height: 40px; border-radius: 40px; background: #fff; border: none; outline: none; cursor: pointer; font-size: 1em; font-weight: 600; } .regiser{ font-size: .9em; color: #fff; text-align: center; margin: 25px 0 10px; } .regiser p a{ text-decoration: none; color: #fff; font-weight: 600; } .regiser p a:hover{ text-decoration: underline; }
Дополнительно:
Если очень захотеть, то найдёшь.
https://github.com/vip-tyumen/ceiling72
Как это выглядит https://потолок72.рф/
Ответы:
Как-то так, под свои нужды подправить:
input:focus-visible + label, input:not(:placeholder-shown) + label { font-size: .75em; top: 4px } |
input:focus-visible + label, input:not(:placeholder-shown) + label { font-size: .75em; top: 4px }
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для создания анимации, при которой label поднимается при нажатии на input и остается на своем месте после введения текста, можно воспользоваться CSS и JavaScript.
Вот пример кода, который позволит реализовать такую анимацию:
```html
.form-group {
position: relative;
margin-bottom: 20px;
}
input {
padding: 10px;
width: 100%;
border: 1px solid #ccc;
border-radius: 5px;
}
label {
position: absolute;
top: 10px;
left: 10px;
transition: top 0.3s, font-size 0.3s;
}
input:focus + label, input:not(:placeholder-shown) + label {
top: -10px;
font-size: 12px;
color: #333;
}
const input = document.getElementById('input');
input.addEventListener('focus', () => {
input.placeholder = 'Your Name';
});
input.addEventListener('blur', () => {
if (input.value === '') {
input.placeholder = ' ';
}
});
```
В данном примере мы создаем форму с input и label. С помощью CSS мы задаем стили для input и label, а также создаем анимацию для label при фокусировке на input и при вводе текста. JavaScript используется для изменения placeholder в input в зависимости от наличия введенного текста.
Таким образом, при нажатии на input label поднимается, а при вводе текста остается на своем месте, создавая эффект анимации.