html输入字段不可点击

Question

For some reason my login textbox is not clickable in the main area, only on the bottom-border. I looked at other topics on this issue and people have been advised to check for transparent overlapping elements, I checked and I don't see any - also tried messing with a higher z-index but that also did not work. Would love some input!

.input_large {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
border: 1px solid #929292;
padding:5px;
width:259px;
background-color:#f6f6f6;

}

this is the CSS. The problem is also viewable here: click

Thanks in Advance!

Answer 1

The span#status is overlapping the input . If you reduce the height of the span it allows the input to be clicked.

#status {
    border-radius: 11px;
    height: 50px; /*Height reduced*/
    left: 0;
    margin-top: -100px;
    padding-top: 15px;
    position: absolute;
    text-align: center;
    text-transform: uppercase;
    top: 50%;
    width: 100%;
    z-index: 0;
}

You could also not position this element absolutely, which will allow the input to be clicked. I'm not sure the reasoning behind this element being position:absolute .

Answer 2

The <span id=status> element is in the way. It is not visible ( opacity: 0 ) and blocks the Username control. Instead of using opacity: 0 , you can use visibility: hidden , but it seems like you could just tweak the height and positioning of the element so that it fills up the white space above the inputs instead.