Все, что находится внутри ввода формы, либо перекрывается, либо не отображается

#html #css #forms #flexbox #position

Вопрос:

Я делал форму входа в систему с анимацией. Если есть только одно поле ввода, оно работает идеально, но когда я добавляю другие поля ввода, они перекрываются друг с другом, и анимация работает неправильно. Кнопка «Отправить» и флажок будут скрыты.

 <div class="form">
        <div class="inputs">
            <input type="text" autocomplete="off" name="name" placeholder=" " required>
            <label for="name" class="label-name">
                <span class="content-name">username</span>
            </label>
            <input type="password" name="name" placeholder=" " required>
            <label for="name" class="label-name">
                <span class="content-name">password</span>
            </label>
            <div class="hide">
                <input type="checkbox" onclick="myFunction()">Show Password
            </div>
            <button>Login</button>
        </div>
</div>

Вот jsfiddle: https://jsfiddle.net/j2dteaz0/1/

Любая помощь будет признательна. Спасибо

Ответ №1:

Абсолютное позиционирование требует использования относительного позиционирования на родительском элементе.

 .inputs > div {
  position: relative;
}
.inputs input[type="text"], .inputs input[type="password"]{
  ...

Отредактированная скрипка

правка 1 Правила CSS только для указанного типа ввода

1. Большое спасибо за ваш ответ. Это действительно помогло!! Я просто хотел спросить, почему он не показывает флажок? Есть какие-нибудь идеи?

2. @AyushShah Я обновил свой ответ, чтобы включить .inputs input[type="text"], .inputs input[type="password"]

3. Большое спасибо за помощь

Ответ №2:

Измените следующее свойство CSS следующим образом;

 .form{
    position: relative;
    height: 50%;
    width: 50%;
}