Can't type in form in my Toggle Login Menu project

Hi, all. I am trying to improve my skills through practice, and have been trying to make a login and search box that will come into view when clicked. I have the click part and the transition working how I want it too. However, the text forms do not allow me to type into them. I’m pretty sure the JavaScript is the problem somehow, but I’m at a loss as to what to do. Any help or suggestions would be so appreciated.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Toggle Project</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
    <link href="style.css" rel="stylesheet">
</head>
<body>
    <div class="login-top"><a class="login-click">Log-in</a> | <a class="search-click">Search</a></div>
    <div class="login-bottom">
        <form name="myForm1" method="post" class="login-bar" onsubmit="return validateForm()">
            <label for="username" href="#">Username: </label>
            <input type="text" id="username" placeholder="Username..."/>
            <label for="password">Password: </label>
            <input type="text" name="password" id="password" placeholder="Password..."/>
        </form>
        <form method="post" class="search-bar">
            <label for="search">Search: </label>
            <input type="text" name="search" id="search" placeholder="Search..."/>
        </form>
    </div>


    <script src="app.js"></script>
</body>
</html>

JavaScript:

const loginSlide = () => {
    const login = document.querySelector('.login-click');
    const search = document.querySelector('.search-click');
    const loginBar = document.querySelector('.login-bar');
    const searchBar = document.querySelector('.search-bar');


    login.addEventListener('click', ()=>{
        //loginBar.classList.toggle('bar-visible');

            if(loginBar.style.animation) {
                loginBar.style.animation = '';
            } else {
                 loginBar.style.animation = `loginFade 0.5s ease forwards 0.1s`;
            }
            if(searchBar.style.animation) {
                searchBar.style.animation = '';
            }
    });

    search.addEventListener('click', ()=>{
        
        if(searchBar.style.animation) {
            searchBar.style.animation = '';
        } else {
            searchBar.style.animation = `searchFade 0.5s ease forwards 0.1s`;
        }
        if(loginBar.style.animation) {
            loginBar.style.animation = '';
        }
    })
};

loginSlide();

CSS:

body {
    color: rgb(241, 81, 81);
    font-family: 'Poppins', sans-serif;
    align-content: center;
    background-image: url("https://images.all-free-download.com/images/graphiclarge/flowers_background_dark_red_repeating_icons_pattern_6835476.jpg");
    background-repeat: repeat;
    overflow-x: hidden;
    
}

.login-top {
    border-color: rgb(241, 81, 81);
    border: 3px;
    border-style: solid;
    border-radius: 20px;
    text-align: center;
    background-color: rgb(255, 233, 233);
    width: 33%;
    letter-spacing: 2px;
    position: relative;
    left: 33%;
    margin-top: 15%;
}

.login-top a {
    transition: all 0.4s ease-in;
    font-weight: bold;
    text-shadow: 1px 1px 0px #000000;
    cursor: pointer;
}

.login-top a:hover {
color: forestgreen;

}

.login-bottom form {
    position: relative;
    left: 20%;
    top: 1vh;
    opacity: 0;
}

.bar-visible .login-bar {
    opacity: 1;
}

@keyframes loginFade{
    from{
        opacity: 0;
        transform: translateY(-20px);
        top: 15%;
        left: 40%;
    }
    to{
        opacity: 1;
        transform: translateY(0px);
        left: 40%;
        top: 15%;
    }
}

@keyframes searchFade{
    from{
        opacity: 0;
        transform: translateY(-100px);
        top: 15%;
        left: 40%;
    }
    to{
        opacity: 1;
        transform: translateY(-63px);
        left: 40%;
        top: 0%;
    }
}

.login-bar {
    border: 3px solid rgb(241, 81, 81);
    background-color: rgb(255, 233, 233);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top: 0px;
    position: relative;
    padding: 5px;
    max-width: 20%;
    left: 200px;
    z-index: -1;
}

.search-bar {
    border: 3px solid rgb(241, 81, 81);
    background-color: rgb(255, 233, 233);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top: 0px;
    position: relative;
    padding: 5px;
    max-width: 20%;
    left: 200px;
    z-index: -1;
}

.login-bar a {
    display: block;
    text-decoration: none;
    color: rgb(241, 81, 81);
}

.login-click input {
    z-index: 9999;
}

Welcome to the forums!

It’s because you’ve set the z-index for .login-bar/.search-bar to -1, placing it behind the transparent parent <div> element.

When you attempt to click into the box, you’re actually clicking into the div.

If I remove the z-index, it all works fine. :slight_smile:

1 Like

Wow, thank you so much! I’ve been trying to fix this one little thing for a minute and was totally lost, haha. Thanks again, seriously!

1 Like

No worries! :slight_smile:

Let us know if you get stuck with anything else. :slight_smile:

1 Like