Firefox Not Displaying Placeholder or Text Entered into Textbox
We use HTML5 input placeholders on the majority of our forms that we add to sites these days. They act as either instructional text (e.g. ‘Enter Keyword Here…’), or even replace labels completely.
Whilst building a site recently, we came to perform cross browser testing and noticed that in Firefox, our text inputs were empty, despite the fact they had placeholder values set. What also struck us as weird was that typing into the text input also didn’t show anything.
My attempt at resolving this resulted in removing one CSS property at a time until the placeholder and text became visible. After a little trial and error it turned out that the issue was caused by the CSS top and bottom padding set on the input.
After removing the CSS padding and using another method to set the height (I think we used height or line-height instead), the text then became instantly visible.