CSS のプレースホルダー表示疑似クラスの詳細な説明-CSSチュートリアル-php.cn

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

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

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

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

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

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

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

:placeholder-shown CSS 疑似クラスは、 または <code> 要素がプレースホルダーテキストを表示するときに有効になります。これは、以下に示すように、プレースホルダーが値を持つ場合にのみ有効になることを意味します。 </code><div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">ログイン後にコピー</div></div></p><p><span class="img-wrap"><img src="https://img.php.cn/upload/image/491/960/586/161062122262313CSS のプレースホルダー表示疑似クラスの詳細な説明" title="161062122262313CSS のプレースホルダー表示疑似クラスの詳細な説明" alt="CSS のプレースホルダー表示疑似クラスの詳細な説明"/></span>##If </p>placeholder<p> is empty <code>placeholder-show </code> は効果がありません: <code><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">// html <input placeholder="" /> <textarea placeholder=" text"></textarea></pre><div class="contentsignin">ログイン後にコピー</div></div></code></p><p><span class="img-wrap"><img src="https://img.php.cn/upload/image/534/557/429/161062122555021CSS のプレースホルダー表示疑似クラスの詳細な説明" title="161062122555021CSS のプレースホルダー表示疑似クラスの詳細な説明" alt="CSS のプレースホルダー表示疑似クラスの詳細な説明"/></span>:placeholder-show vs ::placeholder</p><h2 id="item-2">We </h2> :placeholder-shown<p><code>input</code> 要素のスタイルを設定できます。 <code><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">input:placeholder-shown { border: 1px solid pink; background: yellow; color: green; }</pre><div class="contentsignin">ログイン後にコピー</div></div></code></p><p><span class="img-wrap"><img src="https://img.php.cn/upload/image/837/861/563/161062122928408CSS のプレースホルダー表示疑似クラスの詳細な説明" title="161062122928408CSS のプレースホルダー表示疑似クラスの詳細な説明" alt="CSS のプレースホルダー表示疑似クラスの詳細な説明"/></span>いくつかの奇妙な問題に注意してください - </p>color: green<p> を設定しましたが、効果はありません。これは、<code>:placeholder-shown</code> が <code>input</code> 自体のみをターゲットにするためです。実際のプレースホルダーテキストには、疑似要素 <code>::placeholder</code> を使用する必要があります。 <code><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">input::placeholder { color: green; }</pre><div class="contentsignin">ログイン後にコピー</div></div></code></p><p><span class="img-wrap"><img src="https://img.php.cn/upload/image/107/739/736/161062123348020CSS のプレースホルダー表示疑似クラスの詳細な説明" title="161062123348020CSS のプレースホルダー表示疑似クラスの詳細な説明" alt="CSS のプレースホルダー表示疑似クラスの詳細な説明"/></span></p>::placeholder-shown<p> が適用されると影響を受ける他のプロパティもいくつかあることに気付きました <code>placeholder</code> のスタイル。 <code><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">input:placeholder-shown, textarea:placeholder-shown{ font-style: italic; text-transform: uppercase; letter-spacing: 5px; }</pre><div class="contentsignin">ログイン後にコピー</div></div></code></p><p><span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span></p><p><span class="img-wrap"><img src="https://img.php.cn/upload/image/101/343/735/1610621237201690.png" title="1610621237201690.png" alt="CSS のプレースホルダー表示疑似クラスの詳細な説明"/></span>これが何なのかわかりません。おそらく、これらの属性が # であるためです。 ##placeholder</p> 継承しました。理由がわかったら、メッセージを残して教えてください。ありがとうございます。 <p><code>:placeholder-shown vs :empty</code></p><h2 id="item-3">:placeholder-shown</h2> は、要素にプレースホルダーが表示されるかどうかを決定するために特に使用されるオブジェクトです。主にチェックするために使用します<p>input<code> コンテンツが空かどうか (すべての </code>input<code> にプレースホルダーがあると仮定します)。ここで、</code>empty<code> を使用しても問題ないのかと思われるかもしれません。見てみましょう。 </code><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">// html <input value="not empty"> <input> // css input:empty { border: 1px solid pink; } input { border: 1px solid black; }</pre><div class="contentsignin">ログイン後にコピー</div></div><code></code></p><p><span class="img-wrap"><img src="https://img.php.cn/upload/image/527/736/808/161062124193146CSS のプレースホルダー表示疑似クラスの詳細な説明" title="161062124193146CSS のプレースホルダー表示疑似クラスの詳細な説明" alt="CSS のプレースホルダー表示疑似クラスの詳細な説明"/>ピンク色の境界線が表示されているため、ここでは </span>empty</p> が機能するように見えますが、実際には機能しません<p><code>ピンク色で表示されるのは、擬似クラスによりCSSの重みが増すためです。型セレクター (</code>input</p>) よりも重みが高いクラスセレクター (つまり <p>.form-input<code>) と同様です。高い権限のセレクターは、低い権限で設定されたスタイルを常にオーバーライドします。 </code><code>したがって、次のように言えます。入力要素が空かどうかを確認するために </code>:empty</p> を使用しないでください。 <p><code>入力コンテンツが空 (ドットマーカーなし) かどうかを確認するにはどうすればよいですか? </code></p>入力が空かどうかを確認できる唯一の方法は、<h2 id="item-4">:placeholder-shown</h2> を使用することです。しかし、入力要素にプレースホルダーがない場合はどうなるのでしょうか? ここにトリックがあります: 空の文字列 <p>" "<code> を渡します。 </code><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">// html <input placeholder=" "> //css input:placeholder-shown { border-color: pink; }</pre><div class="contentsignin">ログイン後にコピー</div></div><code></code></p><p><span class="img-wrap"><img src="https://img.php.cn/upload/image/397/936/666/1610621246831370.png" title="1610621246831370.png" alt="CSS のプレースホルダー表示疑似クラスの詳細な説明"/>他のセレクターの結合</span></p><h2 id="item-5">:not</h2>疑似クラスを使用して特定のものを選択できます逆の操作。ここでは、入力が空でない場合に配置できます。 <p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">//html <input placeholder="placeholder" value="not empty" /> // css input:not(:placeholder-shown) { border: 1px solid green; }</pre><div class="contentsignin">ログイン後にコピー</div></div><code>実践的な戦闘</code></p><h2 id="item-6">プレースホルダーで示された</h2>を使用すると、次のアニメーションを実現できます<p><code></code></p><p><span class="img-wrap"> #具体的なコードは次のとおりです: <img src="https://img.php.cn/upload/image/807/587/705/1610621251745972.gif" title="1610621251745972.gif" alt="CSS のプレースホルダー表示疑似クラスの詳細な説明"/></span></p>Html<p></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><div class="input"> <input class="input-fill" placeholder="邮箱"> <label class="input-label">邮箱</label> </div></pre><div class="contentsignin">ログイン後にコピー</div></div><p><strong>Css</strong></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">.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; }</pre><div class="contentsignin">ログイン後にコピー</div></div><p><strong>元のアドレス: https: //www .samanthaming.com/tidbits/88-css-placeholder-shown/</strong></p> <p>著者: Samantha Ming</p> <p>プログラミング関連の知識については、<a href="https://www.php.cn/course.html" target="_blank" textvalue="编程入门">プログラミング入門</a>をご覧ください。！ </p>

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