Firefox Not Displaying Placeholder or Text Entered into Textbox

April 3rd, 2015 - Posted by Steve Marks to (X)HTML / CSS, Software, Web Development.

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.

The Solution

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.

Tags: ,
This entry was posted on Friday, April 3rd, 2015 at 8:05 pm by +Steve Marks and is filed under (X)HTML / CSS, Software, Web Development. You can follow any responses to this entry through the RSS 2.0 feed.
Comments...

Fear not, we won't publish this

Comments (5)
  1. Steele Rocky says:

    Absolutely perfect solution. Thanks a million!!

  2. Tom Cowin says:

    Definitely good catch – thanks for posting as it was a time saver.

  3. Kuldip says:

    Thanks a ton!!! First time found such issue and your post was to the point :)

  4. Jeff says:

    Thanks for this. You saved me all kinds of troubleshooting.

  5. Nice catch, just came across this for the first time. Thanks for posting.