詳細な CSS 属性 (8): ::placeholder VS :placeholder-shown_html/css_WEB-ITnose

これら 2 つの属性について言えば、:placeholder は誰にとってもよく知られており、モバイル端末やハイエンドのブラウザーで使用されていますが、:placeholder-shown はあまり知られていないかもしれません。この記事で説明します。疑似クラスと疑似要素の類似点と相違点についてよくわからない場合は、プレースホルダー属性をフォーム入力/テキストエリアに適用できます。 「CSS 疑似クラス」「疑似要素の類似点と相違点」 2 つの違いについて説明します。

1. 疑似クラスと疑似要素

: プレースホルダーで表示される疑似クラス、新規。セレクター レベル 4 ドラフト: :placeholder 擬似要素、CSS 擬似要素モジュール レベル 4 の新機能

:placeholder-shown は擬似クラスなので、既存の要素を選択する必要があります – ::placeholder 疑似要素は、実際のプレースホルダー テキストをラップします。

:placeholder-shown Chrome/Safari/Opera ブラウザのサポート モバイル ブラウザのサポートは不十分です。参考リンク: CanIUse::placeholder は基本的に最新のブラウザでサポートされていますが、異なるブラウザ メーカーのプレフィックスを追加する必要があります。IE10 未満のブラウザはサポートしていません。参考リンク。 : CanIUse

3. 開発では

:placeholder-shond を使用します。これは、次のように、入力がない場合にプロンプ​​トを設定するためによく使用されます。プレースホルダーは、プレースホルダー テキストの色を設定するためによく使用されます。さまざまなブラウザーのサポートに従ってプレフィックスを設定します。

次に、ブラウザーと互換性を持たせたい場合はどうすればよいか尋ねるかもしれません。詳細については、「プレースホルダー属性の複数ブラウザーのサポート互換性ソリューション」を参照してください。もちろん、参考用のオープンソースの placeholder.js もあります。 4. サポートされているスタイル

<style type="text/css">.text {    width: 400px;    height: 22px;    line-height: 22px;    border: 1px solid #ccc;}.demo:placeholder-shown {    border-color: #00f; // 无输入时,边框显示蓝色    color: #f00; // 只对无输入时的光标颜色有效} </style><input type="text" class="demo" placeholder="请输入用户名称">

::placeholder は、次のプロパティをサポートしています: (注: text-align 属性はサポートされていません) 疑似要素に適用されるすべてのプロパティは、疑似要素にも適用されます。例:

fontプロパティ

<style type="text/css">.text {    width: 400px;    height: 22px;    line-height: 22px;    border: 1px solid #ccc;} ::-webkit-input-placeholder {  /* Chrome/Opera/Safari */  color: #f00;}::-moz-placeholder {  /* Firefox 19+ */  color: #f00;}:-ms-input-placeholder {  /* IE 10+ */  color: #f00;}:-moz-placeholder {  /* Firefox 18- */  color: #f00;} </style><input type="text" class="demo" placeholder="请输入用户名称">

color

背景プロパティ

word-spacing

letter-spacing text-decoration vertical -align text-transform line-height text-indent opacity::placeholder-shown、より多くの属性をサポートしており、より柔軟に使用できます (text-align 属性をサポートします)。 5. 選択要素のプレースホルダーを実装する方法に関する補足情報 js を使用してクラスを追加および削除できます。選択した要素のフォントの色を選択します。もちろん、次のようなものもあります。 違いを知りたい場合は、サンプルを書いて実行してください。