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

尽管使用了-moz占位符属性，但我的文本输入占位符拒绝显示在IE和Firefox中。如果您使用Firefox或IE，可以查看on the contact page here。在IE和Firefox中不显示文本输入占位符

有人可以帮助我一直在试图弄清楚这几个星期。我的代码示例如下：

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

来源

2013-12-10 Michelle M.

作为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;并根据需要调整顶部和底部填充。

来源

2015-01-22 11:37:23

今天碰到这个问题。这个解释和解决方案工作正常。谢谢！ –

我有相同的isue，所以我删除了'height'属性，添加兼容性属性：-webkit-box-sizing：border-box; -moz-box-sizing：border-box; box-sizing：border-box;' 和永久工程就好了， – Leo

@Leo我不确定该解决方案在Firefox中的工作原理。你能提供一个链接到一个工作的例子吗？ –

看来-moz-box-sizing正在导致您的问题。

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

删除线将是一场浩劫与输入大小，所以你可以添加盒大小调整到你的CSS的一般规则。

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

来源

2013-12-11 00:05:26 luke2012

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

来源

2013-12-11 00:06:09 mdesdev

尝试减少顶部和底部的填充。一些垂直填充如何覆盖占位符。不要忘记将元素的height设置为100%。

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

来源

2016-09-17 06:40:34

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

回答

相关问题