Can't enter text to text area in HTML-CodePudding

Can't select or input in text area with custom animated background

I'm tryng to create a Log In page, where user enters his User name and password in dedicated text areas. To make a good design I've added custom background animation. However, within area of background animation I couldn't input or click text area. HTML part is next:

<body>
<div  >
       <div >
        <h1>Title</h1>
        <textarea id="userName"> Enter user name</textarea><br>
        <textarea id="password"> Enter password</textarea>
        
    </div>
            <ul >
                     <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
            </ul>
    </div >
</body>

CSS part is next:

@import url('https://fonts.googleapis.com/css?family=Exo:400,700');
*{
    margin: 0px;
    padding: 0px;
}
body{
    font-family: 'Exo', sans-serif;
}
.context {
    width: 100%;
    position: absolute;
    top:100px;    
}
.context h1{
    text-align: center;
    color: #fff;
    font-size: 50px;
}
.area{
    background: #4e54c8;  
    background: -webkit-linear-gradient(to left, #8f94fb, #4e54c8);  
    width: 100%;
    height:100vh;      
}
.circles{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.circles li{
    position: absolute;
    display: block;
    list-style: none;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.2);
    animation: animate 25s linear infinite;
    bottom: -150px;    
}
.circles li:nth-child(1){
    left: 25%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
}
.circles li:nth-child(2){
    left: 10%;
    width: 20px;
    height: 20px;
    animation-delay: 2s;
    animation-duration: 12s;
}
.circles li:nth-child(3){
    left: 70%;
    width: 20px;
    height: 20px;
    animation-delay: 4s;
}
.circles li:nth-child(4){
    left: 40%;
    width: 60px;
    height: 60px;
    animation-delay: 0s;
    animation-duration: 18s;
}
.circles li:nth-child(5){
    left: 65%;
    width: 20px;
    height: 20px;
    animation-delay: 0s;
}
.circles li:nth-child(6){
    left: 75%;
    width: 110px;
    height: 110px;
    animation-delay: 3s;
}
.circles li:nth-child(7){
    left: 35%;
    width: 150px;
    height: 150px;
    animation-delay: 7s;
}
.circles li:nth-child(8){
    left: 50%;
    width: 25px;
    height: 25px;
    animation-delay: 15s;
    animation-duration: 45s;
}
.circles li:nth-child(9){
    left: 20%;
    width: 15px;
    height: 15px;
    animation-delay: 2s;
    animation-duration: 35s;
}
.circles li:nth-child(10){
    left: 85%;
    width: 150px;
    height: 150px;
    animation-delay: 0s;
    animation-duration: 11s;
}
@keyframes animate {
    0%{
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }
    100%{
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
    }
}/**/

CodePudding user response：

A couple of recommendations. When you're creating a form for someone to login and want an input you should use the input tag as such:

<input id="userName" type="text" placeholder="Enter user name">
<input id="password" type="password" placeholder="Enter password">

You can style these input boxes as well. These input tags are important when creating a login form especially the password input, because when you set the type to password it makes the hidden characters when you type in it.

Second, your text inputs are wrapped in your context class. So in order to make the text boxes able to be typed in you need to change the 'z-index' of that wrapper/container. As such:

.context {
    width: 100%;
    position: absolute;
    top:100px;
    z-index: 2;    
}

You have to think of your website in 3 dimensions, when you change the z-index it is essentially layering your containers on the z-axis which is toward you or away from you.

Cheers!

CodePudding user response：

You just need to adjust your context class, and set the z-index property of CSS.

Here is the online demo which from your example for your reference. https://jsfiddle.net/Halu/5et09628/2/

( refer to line 13 of CSS )