Почему не работает valid вместе с focus в CSS?
<div class="reg-form"> <form action=""> <h2>Регистрация</h2> <div class="form"> <div class="input-box"> <input type="text" > <label for="">Логин</label> </div> <div class="input-box"> <input type="text"> <label for="">Электронная почта</label> </div> <div class="input-box"> <input type="password"> <label for="">Пароль</label> </div> <div class="input-box"> <input type="password"> <label for="">Пароль повторно</label> </div> <input type="submit" class="reg-but" value="Создать аккаунт"> </div> </form> </div> |
<div class="reg-form"> <form action=""> <h2>Регистрация</h2> <div class="form"> <div class="input-box"> <input type="text" > <label for="">Логин</label> </div> <div class="input-box"> <input type="text"> <label for="">Электронная почта</label> </div> <div class="input-box"> <input type="password"> <label for="">Пароль</label> </div> <div class="input-box"> <input type="password"> <label for="">Пароль повторно</label> </div> <input type="submit" class="reg-but" value="Создать аккаунт"> </div> </form> </div>
form { height: 470px; width: 470px; background-color: rgb(37, 34, 83); border-radius: 20px; color: aliceblue; box-shadow: 20px 20px 10px rgb(21, 19, 46); } .form { width: 55%; margin-left: 105px; } .input-box{ position: relative; justify-content: center; width: 100%; margin-bottom: 40px; border-bottom: 2px solid rgb(27, 24, 65); } .input-box input { width: 100%; height: 100%; background-color: transparent; height: 35px; font-size: 21px; padding: 5px; color: aliceblue; border: none; outline:none; } .input-box label{ position: absolute; top: 50%; left: 1px; transform: translateY(-50%); transition: 0.5s; pointer-events: none; font-size: 17px; } .input-box input:focus~label, .input-box input:valid~label{ font-size: 12px; top: -5px; } .reg-but{ width: 100%; background-color: #111257; border-radius: 10px; border: none; font-size: 19px; color: white; height: 40px; padding: 5px; } |
form { height: 470px; width: 470px; background-color: rgb(37, 34, 83); border-radius: 20px; color: aliceblue; box-shadow: 20px 20px 10px rgb(21, 19, 46); } .form { width: 55%; margin-left: 105px; } .input-box{ position: relative; justify-content: center; width: 100%; margin-bottom: 40px; border-bottom: 2px solid rgb(27, 24, 65); } .input-box input { width: 100%; height: 100%; background-color: transparent; height: 35px; font-size: 21px; padding: 5px; color: aliceblue; border: none; outline:none; } .input-box label{ position: absolute; top: 50%; left: 1px; transform: translateY(-50%); transition: 0.5s; pointer-events: none; font-size: 17px; } .input-box input:focus~label, .input-box input:valid~label{ font-size: 12px; top: -5px; } .reg-but{ width: 100%; background-color: #111257; border-radius: 10px; border: none; font-size: 19px; color: white; height: 40px; padding: 5px; }
когда убираю .input-box input:valid~label , начинает работать .input-box input:focus~label , но label возвращается обратно, когда возвращаю, то уже нет никакой анимации. Почему они не работают виесте ?
Дополнительно:
Ответы:
добавь аттрибут require для инпута
- Но что если я сделал на стороне сервера свою валидацию, которая проверяет, написал ли что-то пользователь?
- Valenco, https://codepen.io/kapysta-xxl/pen/qBvYMbR
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Проблема заключается в том, что свойство valid, которое обычно используется для стилизации элементов формы после их успешной проверки, не работает вместе с свойством focus в CSS. Это происходит из-за того, что браузеры не поддерживают одновременное применение этих двух свойств к одному элементу.
Однако, есть способ обойти эту проблему. Вместо того, чтобы пытаться применить оба свойства к одному элементу, можно создать дополнительный класс, который будет применяться к элементу после его проверки и фокуса. Например, вы можете создать класс .valid-focus и применить его к элементу, когда он прошел проверку и находится в фокусе.
Пример использования:
input.valid:focus { /* стили для элемента в фокусе и прошедшего проверку */ } input.valid:focus { /* стили для элемента в фокусе и прошедшего проверку */ }
Таким образом, вы можете добиться желаемого эффекта стилизации элементов формы после их проверки и при нахождении в фокусе, используя дополнительный класс вместо попытки применить два свойства одновременно.