CODEWITHSUNDEEP
htmlcsstextarea
Signor
Signor

Reputation: 1

Can't enter text to text area in HTML

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

I'm trying to create a login page, where the user enters his User name and password in dedicated text areas. To make a good design I've added custom background animation. However, I couldn't input or click text within the background animation area.

@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%;
    }
}
<div class="area" >
       <div class="context">
        <h1>Title</h1>
        <textarea id="userName"> Enter user name</textarea><br>
        <textarea id="password"> Enter password</textarea>
        
    </div>
            <ul class="circles">
                     <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
            </ul>
    </div>

Upvotes: 0

Views: 94

Answers (2)

Watson Chen
Watson Chen

Reputation: 151

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 )

Upvotes: 0

KnightTheLion
KnightTheLion

Reputation: 177

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!

Upvotes: 1

Related Questions