HTML form input text not showing

Question

My page is not showing the input text from my form. Whenever I select the text box, it glows but it does not accept text.

I know there's something wrong with my CSS, but I can't seem to figure out the problem.

HTML:

<div class="container" id="signin">
    <h2>Sign in</h2>
    <form method="post" action="index.html">
        <!-- <input style="display:none" type="password" name="fakepasswordremembered"/> -->
        <input type="text" name="password" placeholder="Password" >
        <br />
        <input class="button" type="submit" name="commit" value="Login" />
    </form>
</div>

CSS:

a {
    text-decoration: none;
    position: absolute;
    right: 0;
    text-align: right;
    color: #fff;
}
a:hover {
    text-decoration: underline;
}

.container {
    position: fixed;
    top: 50%;
    left: 50%;

    width: 55%;
    padding: 30px 0;

    transform: translate(-50%, -50%);
    text-align: center;

    color: #fff;
    background: rgba(0,0,0,0.3);
}

#signin, #close {
    display: none;
}

#signin {
    width: 35%;
}

Oisin · Accepted Answer · 2016-02-07 22:48:50Z

1

You have added display : none to signin id. Either make it display : block or remove it. Moreover for password field, input type="password" can be used.

edited Feb 7, 2016 at 22:48

Oisin

7818 silver badges22 bronze badges

answered Feb 7, 2016 at 22:11

abhiagNitk

1,06710 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Abdirahman Haji Over a year ago

I added this because I wanted to make a feature that will open the signin div once a button is clicked. It's original display is supposed to be none until the "sign in" button is pressed.

abhiagNitk Over a year ago

In that case, you can use javaScript or jQuery. $('#buttonId').click(function() { $('#signin').css('display' , 'block'); });

Erkan Özkök · Accepted Answer · 2016-02-07 22:12:48Z

0

why did you do

 #signin, #close {
        display: none;
    }

try :

 #signin, #close {
        display: block;
    }

answered Feb 7, 2016 at 22:12

Erkan Özkök

89113 silver badges27 bronze badges

Comments

usainzg · Accepted Answer · 2016-02-07 23:05:17Z

0

Try removing:

#singin, #close {
    display: none;   
}

For:

#singin, #close {
    display: block; 
}

Or you can remove only.

answered Feb 7, 2016 at 23:05

usainzg

9859 silver badges14 bronze badges

Collectives™ on Stack Overflow

HTML form input text not showing

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related