h5 と css3 はプロンプト テキストを含む入力ボックスを作成します

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 ブラウザを使用する必要があります。とても便利ではないでしょうか？

【関連する推奨事項】

1. CSS3 の無料ビデオチュートリアル

2. よく使用されるいくつかの最新の CSS3 プロパティを共有します

3. チャット ボックスに小さな鋭い角とバブル効果を作成します

4.

モバイル端末上で高性能な CSS3 アニメーションを実装する

5. 画像のフライインとフェードイン効果を実装するための h5+css3 コード例

以上がh5 と css3 はプロンプト テキストを含む入力ボックスを作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。