HTML5 は CSS3 と連携してプロンプト テキストを含む入力ボックスを実装します (js を取り除く)_html5 チュートリアル スキル

長い間技術的な記事を書いていませんでしたが、最近は Webkit をキャリアとして使用してシステムを開発しています。当然、大量の JS が削減されるだけでなく、HTML5 と CSS3 も使用する必要があります。よりスムーズな開発を保証します。

ダイアログ ボックスを選択すると、プロンプト テキストが明るくなり、入力後に消えます。現在では、入力ラベルの後にラベルを追加するのが一般的です。 JSコントロールを使用します。
HTML5 の登場後、より良い方法が登場しました。

コードをコピー

コードは次のとおりです:

ユーザー テキスト プロンプトとして使用できるプレースホルダー タグがあることがわかります。これはとても便利です。しかし、最も完璧にするには、テキストを軽くするか、プロンプト ファイルを選択した後にスタイルを変更する必要があります。

コードをコピーします

コードは次のとおりです:

input::-webkit- input-placeholder {
color: #999;
-webkit-transition: color.5s;
input:focus::-webkit-input-placeholder、input:hover::-webkit -input-placeholder {
color: #c2c2c2;
-webkit-transition: color.5s>}


-webkit-input-placeholder、Webkit 固有の CSS内部のテキスト スタイルを制御でき、アニメーション効果や CSS3 の疑似クラスと組み合わせることで、システム ログインや検索などに最適なアニメーション入力ボックスを簡単に作成できます。もちろん、IE6 と互換性を持たせたい場合は、この方法は機能しません。ただし、Ie9 はプレースホルダー タグもサポートしていますが、その色は変更できません。

では、サポートされていない場合はどうすればよいでしょうか? Jquery を直接使用するだけで解決できるため、この記事の範囲外です。
デモをください、
デモ アドレス
完全な効果を確認するには、Webkit ブラウザを使用する必要があります。とても便利ではないでしょうか？