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;
}

Lowpitched

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.

Subjunction

Got hit with this issue today. This explanation and solution works fine. Thanks! – Hundley

I had the same isue, so i removed the height attribute, add the compatibility atributes : -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; and everithing works just fine, – Orion

@Orion I'm not sure that solution works in Firefox. Can you provide a link to a working example? – Subjunction

@SimonWatson Hi, the only working example that i have is my webpage. – Orion

@Orion right yes, in your example that works because you're not using a framework like Bootstrap which sets a default fixed height for various input fields. So in your case removing height means it will use the browser default height of auto. For someone like the OP who was using Bootstrap, just removing height won't work as the Bootstrap default fixed height will then be used. Having a fixed height for input fields is also part of the reason why this happens. – Subjunction

@Orion So this issue could alternatively be fixed by setting height: auto; (or removing height if no other height css applies) and adjusting the top and bottom padding as required. I've updated my answer to clarify that having a fixed height on the input field is part of the reason why this issue happens. – Subjunction

Thanks a lot, bro. you saved my day :) – Haematocele

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;
}

Embroidery

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;
}

Inflame

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%; }

Amphibolite