Search code examples
htmlcsstextbox

html input field not clickable


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

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