WebKit には、内部のテキスト スタイルを制御できる独自の CSS があり、CSS3 のアニメーション効果と疑似クラスを使用して、システムのログインや検索などに非常に適したアニメーション入力ボックスを簡単に作成できます。この記事を参照してください。役立つかもしれません
長い間技術的な記事を書いていませんでしたが、最近は Webkit をキャリアとして使用してシステムを開発しています。当然、大量の JS が削減されるだけでなく、HTML5 と CSS3 も使用する必要があります。よりスムーズな開発を保証します。
ダイアログ ボックスが選択されると、プロンプト テキストが明るくなり、入力後に消えます。現在の一般的な方法は、入力ラベルの後にラベルを追加することです。 JSコントロールを使用します。
HTML5 の出現により、より良い方法が登場しました。
コードは次のとおりです:
<input type="text" placeholder="用户名或邮件地址" name="username"/>
ユーザー テキスト プロンプトとして使用できるプレースホルダー タグがあることがわかります。これはとても便利です。しかし、最も完璧にするには、テキストを軽くするか、プロンプト ファイルを選択した後にスタイルを変更する必要があります。
コードは以下のとおりです:
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 ブラウザを使用する必要があります。とても便利ではないでしょうか?
【関連する推奨事項】
2. よく使用されるいくつかの最新の CSS3 プロパティを共有します
3. チャット ボックスに小さな鋭い角とバブル効果を作成します
4.モバイル端末上で高性能な CSS3 アニメーションを実装する
5. 画像のフライインとフェードイン効果を実装するための h5+css3 コード例以上がh5 と css3 はプロンプト テキストを含む入力ボックスを作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。