Everything inside form input is either overlapping or not showing

Issue

I was making a login form with animations. If there is only one input field, it works perfect but when I add other input fields, they overlap with each other and the animations don’t work properly. The submit button and checkbox gets hidden.

<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>

Here is the jsfiddle: https://jsfiddle.net/j2dteaz0/1/

Any help is appreciated. Thanks

Solution

Absolute positioning require to use a relative positioning on a parent element.

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

Edited Fiddle

edit 1 CSS rules for specified input type only

Answered By – Core972

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0