文本输入占位符未在IE和Firefox中显示

Question

尽管使用了-moz-placeholder属性,但我的文本输入占位符拒绝在IE和Firefox中显示.如果您使用的是Firefox或IE,可以在此处的联系页面上查看.

有人可以请帮助我一直试图解决这个问题几周.我的代码示例如下:

 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

正如luke2012所述,当box-sizing: border-box;在文本类型输入字段上使用时会发生这种情况.但是,这仅在使用固定高度时(例如在Bootstrap框架中)并且顶部和底部填充太多时才会发生.这不仅可以防止占位符文本显示,还可以在Firefox中输入文本.

我发现更好的解决方案是保持box-sizing: border-box;并改为移除顶部和底部填充,并将高度增加到您希望输入字段具有的总高度(包括任何边框).

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
}

这使事情更加一致,并且在Bootstrap等框架上运行良好.

或者,您可以根据需要增加固定高度或设置height: auto;并调整顶部和底部填充.

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