Text input placeholders not displaying in IE and Firefox

Question

My text input placeholders refuse to display in IE and Firefox despite having used the -moz-placeholder attribute. This can be viewed on the contact page here if you are using Firefox or IE.

Can someone please help I have been trying to figure this out for weeks. A sample of my code is below:

 input::-moz-placeholder, textarea::-moz-placeholder {
    color: #aaa;
    font-size: 18px;
}

    input:-ms-input-placeholder, textarea::-ms-input-placeholder {
        color: #aaa;
        font-size: 18px;
    }

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color: #aaa;
    font-size: 18px;
}

Answer 1

As luke2012 stated this happens when box-sizing: border-box; is being used on text type input fields. However this only happens when a fixed height is being used (such as in the Bootstrap framework) and there is too much top and bottom padding. Which not only prevents placeholder text from displaying but also input text as well in Firefox.

I find that the better solution is to keep box-sizing: border-box; and to instead remove the top and bottom padding and increase the height to the total height that you want the input field to have (including any border).

input[type="email"], input[type="password"], input[type="text"] 
{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height: 42px; // Increase height as required
    margin-bottom: 30px;
    padding: 0 20px; // Now only left & right padding
}

This keeps things more consistent and works well on frameworks such as Bootstrap.

Alternatively, you could increase the fixed height or set height: auto; and adjust the top and bottom padding as required.

Answer 2

::-webkit-input-placeholder { /* Chrome, Safari */
   color: #aaa;
   font-size: 18px;
}

:-moz-placeholder {           /* Firefox 18- */
   color: #aaa;
   font-size: 18px;
}

::-moz-placeholder {          /* Firefox 19+ */
  color: #aaa;
  font-size: 18px;
}

:-ms-input-placeholder {      /* Internet Explorer */
  color: #aaa;
  font-size: 18px;
}

Answer 3

It seems -moz-box-sizing is causing your issue.

input[type="email"], input[type="password"], input[type="text"] 
{
    -moz-box-sizing: border-box; // remove this line
    height: 25px;
    margin-bottom: 30px;
    padding: 20px;
}

Removing the line will play havoc with your input sizes so you can add a general rule for box-sizing to your CSS.

*, *:before, *:after {
    -moz-box-sizing: border-box;
}

Answer 4

Try to reduce the top and bottom paddings. Some how the vertical padding covers the placeholder. Do not forget to set the height of element to 100%.

input[type="email"], input[type="password"], input[type="text"] { padding: 0 20px; height: 100%; }