web-dev-qa-db-ja.com

Edge Browserでは、CSSを使用して入力プレースホルダーテキストの色を変更する方法は？

Edge Browserでは、入力プレースホルダーの色を変更できませんでした。

:-ms-input-placeholderは機能していませんが、IE 10＆IE 11。

input:-ms-input-placeholder {
    font-style:italic;        
    color: red;
    background-color: yellow;
}

とにかくCSSを使用して動作させる方法はありますか？

htmlcssplaceholdermicrosoft-edge
19
Muthu Kumaran

From CanIUse.com

::-webkit-input-placeholder for（Chrome/Safari/Opera）

IE用の：-ms-input-placeholder。

::-ms-input-placeholder for Edge（webkitプレフィックスもサポート）

二重コロン構文に注意してください

34
Paulie_D

上記の@Paulie_Dの回答に対する@kenのコメントを2回目にしたいと思います。

これは動作します：input[type="text"]::-ms-input-placeholder { color: #000; }

これはしません：input[type="text"]::placeholder, input[type="text"]::-ms-input-placeholder { color: #000; }

理由はわかりませんが、-ms-input-placeholder擬似要素は、他のディレクティブとは別の場合にのみ機能するようです。

11
David Walton

Microsoft Edgeブラウザの現在のバージョンでは、プレースホルダーは正しく機能しません。この問題をご覧ください Microsoft Edgeプレースホルダーバグ 。プレースホルダーが表示されていない場合は、position: relativeおよび:-webkit-input-placeholder不透明度。

8
Stanislav Ostapenko