プレースホルダー属性の使用方法とプレースホルダーのデフォルト スタイルの変更方法の詳細な図による説明

入力ボックスはページ レイアウト中によく使用され、ユーザーに正しい情報の入力を求めるために、プレースホルダー属性を使用して説明する必要がある場合があります。この記事では、placeholder 属性の使用方法と、placeholder 属性のスタイルを変更する方法について説明します。興味のある方は参考にしてください。

placeholder は HTML5 の新しい属性です。プレースホルダーは、短いメッセージの入力フィールドの期待値を記述するために使用できます。プロンプトは、ユーザーが値を入力する前に表示され、ユーザーが値を入力すると消えます。たとえば、ログインするときに、ユーザー名とパスワードを入力する必要があります。これは、使用されるプレースホルダー属性です。

注: プレースホルダー属性は、テキスト、検索、URL、電話番号、電子メール、パスワードの入力タイプに適用されます。

1. プレースホルダー属性の使用方法

構文: placeholder="プロンプトを表示するコンテンツ"

に直接入力できます。プロンプトが必要な入力をボックスに追加します。例:

<input type="text" id="input" placeholder="请输入用户名" />

Rendering :

図に示すように、入力ボックスではユーザー名を入力するよう求められます。

2 プレースホルダー属性を変更します#。

プレースホルダー属性のデフォルトの color や style などがニーズを満たせない場合は、そのスタイルを変更する必要があります。

書き方: input::-webkit-input-placeholder{変更したいスタイル}

プレースホルダーは HTML5 で新たに追加された属性であるため、ブラウザーの互換性に注意する必要があります。

::-webkit-input-placeholder{} /* Webkit カーネルを使用するブラウザ*/

:-moz-placeholder{} /* Firefox バージョン 4-18 */

:: -Moz-Placeholder {}/* Firefox バージョン 19*/

##:-MS-Input-Placeholder {}/* ie ブラウザ*/

## 举 例: プレースホルダー スタイルを変更、設定入力プロンプト ボックスのテキストの色を赤、フォントを 20 ピクセルに設定し、テキストが入力ボックスの中央に水平に表示されるようにします。コードは次のとおりです。

HTML 部分:

<input type="text" id="input" placeholder="请输入用户名" />

CSS 部分:

input{width: 200px;height: 40px;}
#input::-webkit-input-placeholder {
	 color: red;
	 font-size: 20px;
	 text-align: center;
	}
#input:-moz-placeholder {
	color: red;
	font-size: 20px;
	text-align: center;
	}
#input:-ms-input-placeholder {
	color: red;
	font-size: 20px;
	text-align: center;
	}

レンダリング:

##概要: 上記では、プレースホルダー属性の使用方法とプレースホルダー スタイルの変更方法を紹介しましたが、ブラウザの互換性に注意する必要があります。これまでプレースホルダーに触れたことがない人は、ぜひ試してみてください。

以上がプレースホルダー属性の使用方法とプレースホルダーのデフォルト スタイルの変更方法の詳細な図による説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。