CSS のプレースホルダー表示疑似クラスの詳細な説明

(学習ビデオ共有: css ビデオ チュートリアル)

一般に、プレースホルダー 疑似クラス セレクターが使用されているのがよく見られます。デフォルトのスタイルとコピーライティングを変更するために、placeholder-shown 疑似クラス セレクターを突然発見しました。より正式な説明は、

CSS 疑似クラスがプレースホルダーを表示するフォーム要素を表すということです。文章。

簡単に言うと、入力ボックスのプレースホルダーのコンテンツが表示されると、入力ボックスは何をするのでしょうか?

互換性は以下の通りです、モバイル端末では問題ありません

placeholder-showはどうやって表示されますか？仕事？

:placeholder-shown CSS 疑似クラスは、 または <code> 要素がプレースホルダー テキストを表示するときに有効になります。これは、以下に示すように、プレースホルダーが値を持つ場合にのみ有効になることを意味します。 </code><pre class="brush:css;toolbar:false">// html <input placeholder="placeholder text" /> <textarea placeholder="placeholder text"></textarea> // css input:placeholder-shown, textarea:placeholder-shown{ border:1px solid pink; }</pre>

##If

placeholder

is empty placeholder-show は効果がありません: <pre class="brush:css;toolbar:false">// html &lt;input placeholder=&quot;&quot; /&gt; &lt;textarea placeholder=&quot; text&quot;&gt;&lt;/textarea&gt;</pre>

:placeholder-show vs ::placeholder

We

:placeholder-shown

input 要素のスタイルを設定できます。 <pre class="brush:css;toolbar:false">input:placeholder-shown { border: 1px solid pink; background: yellow; color: green; }</pre>

いくつかの奇妙な問題に注意してください -

color: green

を設定しましたが、効果はありません。これは、:placeholder-shown が input 自体のみをターゲットにするためです。実際のプレースホルダー テキストには、疑似要素 ::placeholder を使用する必要があります。 <pre class="brush:css;toolbar:false">input::placeholder { color: green; }</pre>

::placeholder-shown

が適用されると影響を受ける他のプロパティもいくつかあることに気付きました placeholder のスタイル。 <pre class="brush:css;toolbar:false">input:placeholder-shown, textarea:placeholder-shown{ font-style: italic; text-transform: uppercase; letter-spacing: 5px; }</pre>

これが何なのかわかりません。おそらく、これらの属性が # であるためです。 ##placeholder

継承しました。理由がわかったら、メッセージを残して教えてください。ありがとうございます。

:placeholder-shown vs :empty

:placeholder-shown

は、要素にプレースホルダーが表示されるかどうかを決定するために特に使用されるオブジェクトです。主にチェックするために使用します

input コンテンツが空かどうか (すべての input にプレースホルダーがあると仮定します)。ここで、empty を使用しても問題ないのかと思われるかもしれません。見てみましょう。

// html
<input value="not empty">
<input><!-- empty -->

// css
input:empty {
  border: 1px solid pink;
}

input {
  border: 1px solid black;
}

ピンク色の境界線が表示されているため、ここでは empty

が機能するように見えますが、実際には機能しません

ピンク色で表示されるのは、擬似クラスによりCSSの重みが増すためです。型セレクター (input

) よりも重みが高いクラス セレクター (つまり

.form-input) と同様です。高い権限のセレクターは、低い権限で設定されたスタイルを常にオーバーライドします。 したがって、次のように言えます。入力要素が空かどうかを確認するために :empty

を使用しないでください。

入力コンテンツが空 (ドット マーカーなし) かどうかを確認するにはどうすればよいですか?

入力が空かどうかを確認できる唯一の方法は、

:placeholder-shown

を使用することです。しかし、入力要素にプレースホルダーがない場合はどうなるのでしょうか? ここにトリックがあります: 空の文字列

" " を渡します。

// html
<input placeholder=" "><!--  pass empty string -->

//css
input:placeholder-shown {
  border-color: pink;
}

他のセレクターの結合

:not

疑似クラスを使用して特定のものを選択できます逆の操作。ここでは、入力が空でない場合に配置できます。

//html
<input placeholder="placeholder" value="not empty" />

// css
input:not(:placeholder-shown) {
  border: 1px solid green;
}

実践的な戦闘

プレースホルダーで示された

を使用すると、次のアニメーションを実現できます

#具体的なコードは次のとおりです:

Html

<div class="input">
    <input class="input-fill" placeholder="邮箱">
    <label class="input-label">邮箱</label>
</div>

Css

.input{
   position: relative;
 }
.input-fill{
  border: 1px solid #ececec;
  outline: none;
  padding: 13px 16px 13px;
  font-size: 16px;
  line-height: 1.5;
  width: fit-content;
  border-radius: 5px;
}
.input-fill:placeholder-shown::placeholder {
  color: transparent;
}
.input-label {
  position: absolute;
  font-size: 16px;
  line-height: 1.5;
  left: 16px; top: 14px;
  color: #a2a9b6;
  padding: 0 2px;
  transform-origin: 0 0;
  pointer-events: none;
  transition: all .25s;
}
.input-fill:focus{
  border: 1px solid #2486ff;
}
.input-fill:not(:placeholder-shown) ~ .input-label,
.input-fill:focus ~ .input-label {
  transform: scale(0.75) translate(0, -32px);
  background-color: #fff;
  color: #2486ff;
}

元のアドレス: https: //www .samanthaming.com/tidbits/88-css-placeholder-shown/

著者: Samantha Ming

プログラミング関連の知識については、プログラミング入門をご覧ください。 ！

以上がCSS のプレースホルダー表示疑似クラスの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。