html input field not clickable

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!

Solution 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.

Solution 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.

Comments

[Rhendera]

Ah, I see what is happening here. I am editing someone else's code; and I put most of their stuff in the Bootstrap framework - I now see that one of the bootstrap classes is messing with the original CSS. The script was written in 2008 I think, so there are some outdated classes in there that I still have to update. Thanks for the answer!

[Kevin Bowersox]

@Rhendera Glad I could help! Good luck!