Why am I not able to type input into input boxes?

Question

To replicate:

• Be using Chrome version 34 or the latest version of Firefox.
• Open up the site and click Sign Up or Login
• In Chrome, click in a password input. In Firefox, click in any input.

The results should be that the input appears to get focus, but does not allow the user to enter characters.

Solutions I have tried:

• Disabling JavaScript
• Messing with the z-index settings (making sure that the parent and child elements had a position other than static.

Things to note:

• I did not have this problem in Chrome version 33.
• This happens in Windows 7, Windows 8.1, and on Mac.
• In Chrome only the inputs of type password do not work. Only text does.

I really feel like it's an issue with the z-index and the .list elements underneath the .drop-box, but am also puzzled why (in Chrome) an input with type text would work but password wouldn't. I have been trying to see what might have changed between Chrome version 33 and 34 so I can maybe pinpoint the issue, but have had no luck as of yet.

Any ideas?

Answer 1

You have box-sizing: border-box and padding-top + padding-bottom = height. This means the content height is zero, so you cannot see anything you type (but attempting to type correctly updates the validation).

You should remove the box-sizing on those elements, or remove the padding.