HTML で入力プロンプトのテキストスタイルを変更するためのサンプルコード

多くのウェブサイトでは、入力ボックスにヒントテキストが表示されています。入力ボックスにヒントテキストを表示する方法を見てみましょう。 <input> タグに placeholder="prompt text" を追加するだけで済みますが、プロンプトテキストのスタイルを変更したい場合はどうすればよいでしょうか。 CSS スタイルは次のように設定できます。

<!DOCTYPE html>
<html>
<ヘッド>
<メタ文字セット="UTF-8">
<title>入力ボックスのプロンプトテキスト</title>
<スタイル>
/*プロンプトテキストの色を変更する*/
input::-webkit-input-placeholder { /* WebKit ブラウザ */ 
色: 赤; 
}
input:-moz-placeholder { /* Mozilla Firefox 4 から 18 */ 
色: 赤; 
}
input::-moz-placeholder { /* Mozilla Firefox 19+ */ 
色: 赤; 
}
input:-ms-input-placeholder { /* Internet Explorer 10+ */ 
色: 赤; 
}
</スタイル>
</head>
<本文>
<input type="text" placeholder="ユーザー名を入力してください" />
</本文>
</html>

変更されたプロンプトテキストスタイルは次のとおりです。

PS: HTML5の入力タグの必須属性プロンプトテキストの変更を見てみましょう

フォームを送信するときに、このような要件に遭遇することがあります。ユーザーが必要な情報を入力せずに送信した場合、プロンプトテキストを必要なプロンプト情報に変更する必要があります。この場合、入力に次のステートメントを追加できます。

<input type="text" placeholder="お名前" 必須 oninvalid="setCustomValidity('お名前を入力してください');" oninput="setCustomValidity('');" />

html の入力プロンプトテキストスタイルを変更する方法については、これで終わりです。html の入力テキストスタイルに関するより詳しい内容については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: クールな点滅アラームボタンをおすすめします

>>: 小さなプログラムが天井に張り付いてしまう問題を完璧に解決するためにposition:stickyを使用する方法