コメント:WebKitに固有のユニークなCSSは、テキストスタイルを制御できます。 CSS3のアニメーションエフェクトと擬似カテゴリを使用すると、システムログイン、検索などに非常に適したアニメーション入力ボックスを簡単に作成できます。興味がある場合は、次の記事を参照するか、支援できます。
私は長い間技術的な記事を書いていません。私は最近、WebKitをキャリアとして使用しています。もちろん、HTML5とCSS3を大量に使用する必要があります。これにより、多くのJSが減少するだけでなく、より滑らかになります。ダイアログボックスが選択されると、プロンプトテキストが軽くなり、入力後に消えます。現在のプラクティスは、入力タグの背後にラベルを追加することです。 JSコントロールを使用します。
HTML5が表示された後、より良いアプローチがあります。
<input type = "text" placeholder = "ユーザー名または電子メールアドレス"/>
ユーザーのテキストプロンプトとして使用できるプレースホルダータグがあることがわかります。これは非常に便利です。しかし、最高の完璧さを実現するには、テキストを選択した後に明るくするか、プロンプトファイルのスタイルを変更する必要があります。私たちは何をすべきですか?
input :: -webkit-input-placeholder {
色:#999;
-webkit-transition:color.5s;
}
入力:Focus :: -WebKit-Input-PlaceHolder、input:Hover :: -webkit-input-placeholder {
色:#C2C2C2;
-webkit-transition:color.5s;
}
-WebKit-Input-PlaceHolderは、WebKitに固有のユニークなCSSであり、内部のテキストスタイルを制御できます。 CSS3のアニメーション効果と擬似クラスを使用すると、システムログイン、検索、その他の場所に非常に適したアニメーション入力ボックスを簡単に作成できます。もちろん、この方法はIE6と互換性があるためには機能しません。ただし、IE9はプレースホルダータグもサポートしていますが、その色は変更できません。
それで、それがサポートされていない場合はどうすればよいですか? JQueryを使用して使用するだけで、この記事の範囲内ではありません。
デモを指定すると、デモアドレスがWebKitブラウザにあり、完全な効果を確認する必要があります。とても便利ではありませんか?