web-dev-qa-db-ja.com

テキスト入力プレースホルダーがIEおよびFirefoxで表示されない

テキスト入力プレースホルダーは、IEおよびFirefoxで-moz-placeholder属性を使用したにもかかわらず表示されません。これは、連絡先ページで表示できます ここで 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;
}
htmlcross-browserplaceholder
19
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;そして、必要に応じて上下のパディングを調整します。

40
Simon Watson
::-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;
}
5
mdesdev

そうみたいです -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;
}
3
luke2012

上下のパディングを減らすようにしてください。垂直パディングがプレースホルダーをどのように覆うか。要素のheightを100%に設定することを忘れないでください。

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

2
Ata Iravani