ホームページ > 記事 > ウェブフロントエンド > CSSでプレースホルダーの色を変更する方法
CSSでプレースホルダーの色を変更する方法
- 醉折花枝作酒筹オリジナル
- 2021-04-13 10:43:1234469ブラウズ
方法: まず、「::placeholder」セレクターを使用して、変更する必要がある要素を選択し、次に「color:color value;」スタイルを要素に追加します。プレースホルダーは CSS3 の新しいセレクターであり、ブラウザごとに異なるプレフィックス (「-ms-」、「-webkit-」など) が必要であることに注意してください。
このチュートリアルの動作環境: Windows7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
プレースホルダー属性は、HTML5 の新しい属性です。その機能は、入力フィールドの期待値のプロンプト情報を記述することです。
プレースホルダーの色を変更するにはどうすればよいですか?
しかし、特定の問題があります。ブラウザの互換性の問題です。例として chorme を取り上げます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
input::-webkit-input-placeholder {
color: #aab2bd;
font-size: 12px;
}
input {//边框效果
border: 1px solid red;
}
</style>
</head>
<body>
<input type="text" placeholder="请输入">
</body>
</html>chorme ブラウザに対応するセレクターは input::-webkit-input-placeholder# です。
input::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color : red;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color : red;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color : red;
}
input:-ms-input-placeholder { /* Internet Explorer 10-11 */
color : red;
}
input::-ms-input-placeholder { /* Microsoft Edge */
color : red;
}
- WebKit、Blink、Edgeブラウザなどでは -webkit- プレフィックスを付ける必要があり、これはダブル コロンです。input
- を使用して記述する必要があります。Firefox ブラウザの場合、これを記述する方法は 2 つあり、どちらも次のようにする必要があります。接頭辞として -moz- を付けます。 Firefox の以前のバージョンではコロン (:) が使用されますが、より高いバージョンでは二重コロン (::) が使用されます。Firefox では入力は必要ありません。
- プレースホルダー属性は IE10 でのみサポートされています。IE10 と IE11 は、コロン (:) を使用して -ms- プレフィックスを付けて記述されており、入力を行う必要があります
以上がCSSでプレースホルダーの色を変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：csで反転効果を実現する方法次の記事：csで反転効果を実現する方法