CSSスタイルを使用してプレースホルダのテキストチップの色を変更する方法
PlaceHolder属性に慣れていない場合は、それが何であるか、そしてそれが使用されるのかを少し明確にしましょう。 フィールド入力フィールドに使用されます。 属性は、いくつかの先端の役割を示すことによって、入力フィールドの碑文を表示します。 私たちのサイトの前半で、 javaScriptを使用して、 良い面 この方法 これはクロスブラウザです。 それでは、InputArea要素とTextArea要素で使用されているプレースホルダー属性の様式化について説明しましょう。
私たちの例の入力フィールドコードは次のようになります。
出口で、そのようなフィールドを入手します。
現在、プレースホルダーを様式化する必要があると想像しましょう。これについては、CSSに一連の規則を登録する必要があります。
:: - webkit-input-placeholder(カラー:#c1c1c1;):: - moz-placeholder(カラー:#c1c1c1;)/ * Firefox 19+ * /:-moz-placeholder(カラー:#c1c1c1;)/ * Firefox 18- * /:-ms-input-placeholder(色:#c1c1c1;)
我々が得る:
私たちはすべてのプロパティを変更することはできませんが、最新のブラウザでサポートされているそれらのほとんどのリストは以下のとおりです。
フォント (関連プロパティも)
バックグラウンド。 (関連プロパティも)
色
ワードスペース
文字間隔
テキスト装飾
垂直方向の整列
テキスト変換
行の高さ
テキストインデント
テキストオーバーフロー。
不透明度
に 別のブラウザ ルールはさまざまな方法で書かれています 単一の標準はありません、このレコードのセットは関連性があり続けています。 IEブラウザ、および18版のプレースホルダーの下のFirefoxは疑似クラスとして認識され、新しいFirefoxブラウザではWebKitとBlinkが疑似要素として認識されています。
プレースホルダーにおけるテキストの削減
時々ヒントは入力フィールドに完全に適合することができないような長さになる可能性があります。 これらの目的のために、入力フィールドのテキストプレースホルダを縮小する追加のプロパティを使用することもできます。
入力(text-overflow:省略記号;)入力:: - placeholder(text-overflow:省略記号;)入力:-moz-placeholder(テキストオーバーフロー:省略;)入力:-ms-input-placeholder(テキストオーバーフロー:省略記号;)
その結果、このタイプのプレースホルダを使用して入力フィールドが取得されます。
フィールドをクリックするときにテキストを非表示にします
デフォルトでは、各ブラウザはプレースホルダを自分の方法で解釈します。 いくつかのブラウザでは、フィールドをクリックするとすぐに隠れています。これは、入力フィールドの少なくとも1文字の存在下に隠されています。 フィールドをクリックするとテキストを隠してみましょう。
:焦点:: - webkit-input-placeholder(色:透明;):焦点:: - Moz-PlaceHolder(色:透明;):焦点:-moz-placeholder(色:透明;):焦点:-ms-input - PLACEHOLDER(色:透明;)
そのような行動を取得します。
疑似要素::プレースホルダーカラー (場合によっては、疑似クラス)フォーム要素を埋めるテキストを設定できます。 PlaceHolder属性を使用してインストールされています。 .
このテキストは、特別な接頭辞を使用して最新のブラウザ用に様式化できます。
:: - webkit-input-placeholder(/ * Chrome / Opera / Safari * / Color:Pink;):: - Moz-PlaceHolder(/ * Firefox 19+ * / Color:Pink;):-ms-input-placeholder( / * IE 10+ * /カラー:ピンク;):-moz-placeholder(/ * Firefox 18- * /カラー:ピンク;)
警告:標準以外の構文で、奇妙な名前が接続されています。 :プレースホルダーが標準で、仕様の著者でさえ、::プレースホルダーは標準化されていると考える可能性があります。
疑似要素の場合と同様に、次のように特定の要素に適用できます。
input.big-dog :: - webkit-input-placeholder(カラー:オレンジ;)
例を見る
の違い:プレースホルダー表示と::プレースホルダー
:PlaceHolder-exhidは入力フォームを強調表示するように設計されており、CSSプレースホルダーの色はテキストの様式化を担当します。
図を見てください。
それはそれが混乱する多\u200b\u200bくのことがわかりました、そして私はしばしば前記仕様を見ることがよくあります:プレースホルダーが表示されていますが、::プレースホルダー。
それは彼のための親要素であるため、プレースホルダが表示されているプレースホルダーがテキストの様式化に影響を与える可能性があることに注意してください( たとえば、フォントサイズを変更できます).
注意してください::プレースホルダー表示 - 擬似クラス( コンクリート状態の要素)、A ::プレースホルダは疑似要素です( ドームにない目に見える部分)。 それらはシングルと乳製の引用符で異なります。
以来、プレースホルダが表示されているのは疑似衝突ですから、既存の要素を割り当てる必要があります。 そのため、フォーム要素内のテキストが表示されているときに入力フォームを割り当てます。 疑似要素::プレースホルダーはプラグ自体のテキストをラップします。
要素またはクラス?
この計画では、入力プレースホルダの色は標準化されていません。 つまり、各ブラウザには、どのように機能するかについての理解があります。
最初は、この疑似衝突が導入されました ブラウザFirefox。 。 この疑似クラスは、操作のためのスペースはそれほど多くない。 たとえば、入力フォームを選択したときにテキストの色を変更したい場合は、入力タイプセレクターを使用する必要があります.UPES :: PlaceHolder。 そして疑似衝突はそれがそれをすることを許さない。
IE10は、この機能を疑似クラスとしてサポートし、アイテムではありません。 他のすべてのブラウザで、彼は疑似要素と見なされています。
Firefoxのカラープラグ
プラグの色が他のブラウザと比較してより薄く見えることに気づいた。 下の図では、左側にFirefox 43が表示され、右側のChrome 47
これは、デフォルトでは、Firefoxのすべての「プラグ」が追加の透明度値を受信するためです。 この効果を取り除くために、次のコード行を必要となります。
:: - Moz-PlaceHolder(不透明度:1;)
Firefoxブラウザでこのデモを開くようにしてください。
スタイルサポート
疑似要素は次のプロパティをサポートしています。
- フォントのプロパティ
- 色;
- 背景プロパティ
- 単語間隔
- 文字間隔;
- テキスト装飾
- 垂直方向の整列。
- テキスト変換
- 行の高さ;
- テキストインデント
- 不透明度
追加のリソース
MDNのドキュメント
すなわちドキュメンテーション
展開された記事ブログツリーハウス
あなたの多くはしばしばフォームに直面しており、プロンプトとして署名があるところです。 入力時に消えます。 そのため、これはプレースホルダ属性です。これは、テキスト(入力)を入力するために作成された要素です。 これを使用すると、このフィールドに入力する前にヒントとして表示されるテキストを指定できます。 残念ながら、この属性を使用してすべてのブラウザが正しく機能しているわけではありません。 時代遅れのバージョンとこのテキストは表示されません。
以下に説明されている問題を解決するためにそれを作る方法を検討してください。
1.遊技者のスタイルを変更する方法。
2. Playholderのテキストを非表示にする方法を入力しても、すでにフィールドを押すとすでに押されています。
3.プレースホルダーが原則として表示されていないブラウザとの対応。
すべての例では、入力フィールドで動作します。
入力内のプレースホルダでテキストチップカラーを変更する方法
長い間、各ブラウザがさまざまな方法でプレースホルダを表示するだけでなく、スタイルを変更するための特別なプロパティも必要です。 そして、私は書き込み中の対応する接頭辞について話していません。 それらを見てみましょう。デフォルトでは、多くのブラウザでは、先端の色は灰色です。 に この例 それを黒にしましょう。
この項目の透明性がサポートされているブラウザには、透明度を担当するOpacityプロパティを入力する必要があります。 それ以外の場合、色は灰色、およびデフォルトでも灰色になります。
そして、はい、これらのクラスプロパティを指定するために使用できます。 私たちは下を見ます:
入力電話:: - webkit-input-placeholder(色:赤;)
.input-text :: - webkit-input-placeholder(色:緑色;)
/ * etc ... * /
フィールドをクリックするとプレースホルダーを削除します
デフォルトでは、ブラウザでは、PlaceHolder属性からのテキストが入力が開始された後にのみ消えますが、入力フィールドを押すことでこのテキストを気を取られるようにしたい人もあります。 ほとんどの場合これを行います。 それのために、あなたは焦点のためのスタイルを書く必要があります。ここで、テキストチップの色が完全に透明になるでしょう、つまり目に見えるようになるでしょう。 :焦点:: - webkit-input-placeholder(不透明度:0;)/ * WebKit * /
::: - MOZ-PlaceHolder(不透明度:0;)/ * Firefox 19+ * /
:フォーカス: - モズプレースホルダ(不透明度:0;)/ * Firefox 18- * /
:焦点:-ms-input-placeholder(不透明度:0;)/ * IE * /
CSSアニメーションの色のスムーズな変更や色の変化を設定できます。 しかし、クロスブラウザでそのような解決策が発生する可能性があります。
入力でプレースホルダー属性をサポートしていないろうが何をするか?
まあ、まさに失われない)はい、実際にはそのようなブラウザがあります。 例えば、IE8。 そして、はい、常にそれを使う人がいます。 あなたがすべての訪問者のために解決する必要があるならば、それからもう少し忍耐力をかけてください。この問題を解決するには、jQueryプラグインをこのjQuery - JQuery.PlaceHolderにダウンロードしてください。 今日は明日変わるので、私はリンクを与えません。 ただし、プラグインのダウンロードソースで実行されている例をダウンロードすることができれば。
それを接続してください。 原則として必要なものを忘れないでください。jQuery Connect。
PlaceHolder属性は、空の入力フィールド内のプロンプトを作成するために使用されます(タグ そして
まだPlaySholderが何であるかを知らない人とそれを使用する方法の例から始めましょう。
インターフェースを開発するときは、プレイホルダーの行動の機能を考慮に入れる必要があります。 遊技者のテキストは、入力が始まるとすぐに消えます。 つまり、入力フィールド自体に関する情報を送信するためにそれらを使用する必要がない(数とどの文字に含めるべきかを含む)。 これらの目的のためにタグを使用するのが最善です
様式化
以下の規則は、プレーヤーの選択肢を定型化するために使用されます。
:: - webkit-input-placeholder(カラー:ブルー;):: - Moz-Placeholder(カラー:ブルー;)/ * Firefox 19+ * /:-moz-placeholder(カラー:ブルー;)/ * Firefox 18- * /:-ms-input-placeholder(カラー:ブルー;)ひどく見えますね。 そしてこれが理由があります - 今まで、プレイホルダーのためのCSS規則は標準化されていないため、各ブラウザで実装が異なります。 必要なすべての接頭辞についてもっと読むCANIUSEで見つけることができます。
あなたがCSSプリプロセッサを使用しているならば、ほとんどの場合、スタイルを映すためには、簡単な混合を書くのが最も便利になるでしょう。 SASSの例:
@Mixin PlaceHolder(&: - webkit-input-placeholder(@Content;)&: - Moz-PlaceHolder(@Content;)&: - Moz-PlaceHolder(@Content;)&: - MS-Input-PlaceHolder(@ Content ;)))ミキシングのコンテキストに応じて、スタイルのグローバルアプリケーションと個々のアイテムの両方を使用できます(SassMeisterで試してください)。
//各入力フィールドのグローバルに@includeプレースホルダー(色:青;) //特定の入力フィールドの場合.input(@includeプレースホルダー(色:緑;))例
PlaySholderの青いテキスト(決してそれをしない):
.blue-text :: - webkit-input-placeholder(カラー:#2e8ece;).ble-text:-moz-placeholder(カラー:#2e8ece;).blue-text :: - moz-placeholder(カラー:#2e8ece ;).blue-text:-ms-input-placeholder(カラー:#2e8ece;)
サポートされているプロパティ
みんなではありません CSSプロパティ 遊技者と一緒に使用できます。 ここに 全リスト サポートされているプロパティ:
- フォントとすべての関連プロパティ(フォントサイズ、フォントファミリなど)
- 背景とすべての関連プロパティ(背景色、背景画像など)
- 不透明度
- テキストインデント
- テキストオーバーフロー。
- 色
- テキスト変換
- 行の高さ
- ワードスペース
- 文字間隔
- テキスト装飾
- 垂直方向の整列
アニメーション
アニメーションのアイデアはHTML5.byブログに属しています。
以下の例はすべてSASSプリプロセッサを使用して書かれています。 それぞれがsassmeisterへのリンクで添付されています。これは、コンパイルされたCSSコードを見つけることができます。
ほとんどの場合、入力フィールドに焦点を合わせると、映画所有者にアニメーションを適用します。 これはすべて非常にシンプルです。 以前のミックスインプレースホルダーによって使用されるたったほんの数回:
.input(@include Placeholder( //通常の状態のスタイル )&:フォーカス(@Include Placeholder( //フォーカスイベント後のスタイル } } }透明度を変更します
.input(color:#aaa;不透明度:1;遷移:不透明度300ms;)&:焦点(@include PlaceHolder(不透明度:0;))
左右に移動します
入力フィールド幅が大きいほど、テキストインデントプロパティの値が大きくなるほどます。 標準入力フィールドの場合、500ピクスで十分になります。より広くピックアップする必要があります。 入力フィールドの幅から、テキストインデント値はアニメーションの速度によって異なります。 Shiftには、負の値、たとえば-500pxを使用する必要があります。
シフトダウン
最後の例のように、アニメーションは入力の意志のサイズによって異なりますが、この場合は高さに注意が払われます。 圧倒的多数の入力フィールドの場合、希望する線高さ値は100ピクセル以内です。 残念ながら、Line-Heightプロパティを使用すると、プロパティが負の値を受け入れないため、シフト効果を実装することは不可能です。
.input(text-indent:0px;遷移:テキストインデント300ms;)&:focus(@include PlaceHolder(text-indent:500px;)))
一緒
PlayColdersのアニメーションコードを使用するには、快適で便利でした、あなたはあらゆるプリプロセッサのためにミックスの小さなライブラリを書くことができました。 ライブラリはこのようになります。
@mixin Placeholder(&: - - webkit-input-placeholder(@ content)&: - Moz-PlaceHolder(@Content)&: - MOZ-PlaceHolder(@Content)&: - MS-Input-PlaceHolder(@ Content))@ Mixin PL-Shift($ SIDE:左、$ POSION:500ピクセル、$ DURATERDER)(@Include PlaceHolder(text-indent:0;遷移:テキストインデント$)&:FOCUS(@include PlaceHolder(テキストインデント: ($ side \u003d\u003d left、 - $ position、$ position);)))))))))@ mixin pl-slide-down($ POSION:5、$持続時間:200ms)(@includeプレースホルダー(line-height:1;遷移:ラインハイト$持続時間;)&:焦点(プレースホルダー(ラインハイト:$ POSICT;)))@ミックスPLフェードアウト($持続時間:200ms)(@Include PlaceHolder(不透明度:1;遷移:不透明度) $持続時間;)&:焦点(@Include PlaceHolder(不透明度:0;)))それを使うのはとても簡単です。 目的のミックスを任意のフィールド入力フィールドに接続するのに十分です。または、ページ上のすべてのPaySholeDersに1つのグローバルルールを作成するだけです。
//個々の要素の場合.pl-shift-right(@include pl-shift(右);).pl-fade-out(@include pl-fade-out;) //残りのために@include PL-Shift(左);オートオプレフィサー。
プリプロセッサを使用しないと、まだソースCSSファイルがすべてのブラウザのプレフィックスからPRORIXESに入ることを依然として適用したくない場合は、AutoPrifixerに注意してください。 これにより、すべてのプロパティに必要なプレフィックスをすべて追加することで、純粋なCSSを汚れ(ただし別のファイルに入っています)にすることができます。 プラグインを通過所有者と連携するように強制するには、疑似要素::プレースホルダを使用するのに十分です。
::プレースホルダー(色:オレンジ;)。 入力::プレースホルダー(色:青;)バッテリ解析後、AutoPrefixerは別のCSSファイルを作成します。これにより、指定したすべてのブラウザに必要なすべてのプレフィックスを作成します。
次は何ですか
私がすでに上で書かれているように、PlaySwordsへのスタイルの使用につながっているすべてはまだ標準化されていません。 すぐに修正されます。 セレクタレベル4の仕様には、Pseudo-Class:PlaceHolder-exhatedが追加されました。これは最終的に標準的なPseudoclassと擬似要素の標準のすべての非常識な混合をもたらします。 CANIUSEのサポートに従うことができます(任意のブラウザではサポートされていません)。
With:PlaceHolder-exhogedがはるかに簡単になります。
。入力:プレースホルダー表示(色:青;)こんにちは、今日はインプットでプレースホルダーを使って誰も誰も驚かないでしょう。 プレースホルダーは、入力内の例を持つ一時的なテキストで、テキストに入ると消えます。 PlaceholderのためのCSSスタイル、今日登録しようとします。
タスク:プレースホルダーのためにあなたのCSSスタイルを作ります
入力がプレースホルダーによって使用されているスタイリッシュなサイトがあるとします。 テキストプレースホルダーの灰色の凝集テキストがサイトの全体的なスタイルを見ているようにする必要があります。 これを達成するには? すぐに私はそれがすべてのブラウザではなくなるまで機能すると言います。 具体的には、すなわち、以下のバージョン9以降は全くうまくいかないので、それは大きな困難で動作します。 もう1つのFirefoxのケースとWebKitブラウザ。
解決策:プレースホルダーのためのCSSスタイル
だから、私たちはタスクを設定します、どうすれば決めますか?
まずテストアースを作ります。
準備ができました.WebKitとMozillaには、PlaceHolder :: - WebKit-Input-PlaceHolderと:-moz-placeholderという特別なスタイルを割り当てることができる独自の修飾子があります。 それらの使用方法を見てみましょう。
入力自体のスタイルとITのテキストについて説明します(例ではコントラストの青い色)。
入力(幅:250px;カラー:ブルー;フォントウェイト:ノーマル;フォントスタイル:Normal;)
Webkitブラウザのこの入力でプレースホルダテキストの特別なスタイルを書く(Chrome、Safari、Opera):
入力:: - webkit-input-placeholder(カラー:赤;フォントスタイル:イタリック;フォントウェイト:太字)
私たちは赤の太字の斜体を使ってプレーホルダーのテキストを作ります。 単一のコロンで区切られている他のCSS疑似クラスとは異なり、WebKitのプレースホルダーのスタイルはダブルコロンで区切られています。
今、私はまったく同じスタイルを与えます Mozilla Firefox ブラウザ:
入力:-moz-placeholder(色:赤;フォントスタイル:イタリック;フォントウェイト:太字)
準備ができています。 PlaceHolderのためのCSSスタイルもちろん、あなたはあなたのデザインに適したものを登録することができます。 作業デモはJSFIDDLEで表示できます。
この記事があなたのサイトをユーザーにとってより便利にするのを助けることを願っています。