在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中不顯示文本輸入佔位符

回答

相關問題