Form Input Not Working; A Misplaced “float” Declaration in CSS Can Be to Blame for Broken Form Input

Just a note in case your pulling your hair out. If you have a form that for all intents and purposes SHOULD be working but does not allow user input in a text field then perhaps this cold be your problem.

Try taking a look at the CSS on the element following the form. In my last encounter with this problem, it was a <p> that followed a form within a div.

The <p> had  a CSS declaration of float:left and was inside a div that was floated to the right.

The followinghad 2 declarations:

p {
float:left;
clear:left;
}

To my surprise, this is what broke the form inputs -weird.

I fixed the <p>’s CSS to declare clear:left; and the form straightened back up.

So if you’re having trouble with form inputs and you have narrowed it down to CSS, I hope this helps.

Please feel free to make any comments or even give an explanation.

Leave a Reply

Your email address will not be published.