CSS中什么是:placeholder-shown？如何工作？有什么用？

CSS :placeholder-shown伪类是专门用于确定元素是否显示占位符的对象，主要使用它来检查input内容是否为空。本篇文章带大家了解一下:placeholder-shown伪类，详细介绍一下它是如何工作的。

使用此伪类来设置当前显示占位符文本的输入的样式，换句话说，用户未在文本框中键入任何内容

根据您的输入是否为空，应用一些动态样式非常好

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

它是如何工作的？

:placeholder-show 是CSS伪类，可让您将样式应用于具有占位符文本的或 </code>。</p><pre><input placeholder="placeholder text" /> <textarea placeholder="placeholder text"></textarea></pre><p><img src="/Uploads/news/d0642f2df69a573565c96640eb483361/1625538377106812.png" title="1625538377106812.png" alt="3.png"/></p><p>结果：</p><ul><li>如果显示占位符，则为粉红色，表示用户未输入任何内容</li><li>如果未显示任何占位符，则为黑色，表示用户已键入内容</li></ul><h3><strong><code>:placeholder-showd</code>必须具有占位符</strong></h3><p>如果元素没有占位符文本，则此选择器将不起作用。</p><pre><input />  <input placeholder="" /></pre><pre>input:placeholder-shown { border-color: pink; }</pre><p><img src="/Uploads/news/d0642f2df69a573565c96640eb483361/1625538386679176.png" title="1625538386679176.png" alt="4.png"/></p><h3><strong><code>:placeholder-shown</code> vs <code>::placeholder</code></strong></h3><p>因此，我们可以使用 <code>:placeholder-shown</code> 设置输入元素的样式。</p><pre>input:placeholder-shown { border: 1px solid pink; background: yellow; color: green; }</pre><p><img src="/Uploads/news/d0642f2df69a573565c96640eb483361/1625538395914353.gif" title="1625538395914353.gif" alt="5.gif"/></p><p>☝️嗯...注意到有些奇怪——我们将颜色设置为：绿色，但没有用。好吧，这是因为 <code>:placeholder-shown</code> 只针对输入本身。但是对于实际的占位符文本，您必须使用伪元素 <code>::placeholder</code>。</p><pre>input::placeholder { color: green; }</pre><p><img src="/Uploads/news/d0642f2df69a573565c96640eb483361/1625538400312242.gif" title="1625538400312242.gif" alt="6.gif"/></p><p>但是！当我在处理这个问题时，我注意到还有一些其他属性，如果在 <code>:placeholder-shown</code> 级别应用，将会影响到占位符文本。</p><pre>input:placeholder-shown { font-style: italic; text-transform: uppercase; letter-spacing: 5px; }</pre><p><img src="/Uploads/news/d0642f2df69a573565c96640eb483361/1625538411509363.png" title="1625538411509363.png" alt="7.png"/></p><p>现在，我真的不知道为什么会发生这种情况，也许是因为这些属性被占位符继承了。</p><h3><strong><code>:placeholder-shown</code> vs <code>:empty</code></strong></h3><p>尽管 <code>:placeholder-shown</code> 是专门用于确定元素是否显示占位符的。实际上，我们可以使用它来检查输入是否为空（当然，假设所有输入都有一个占位符）。因此，也许您的下一个问题是，我们不能使用CSS empty吗？好吧，让我们检查一下</p><pre><input value="not empty"> <input></pre><pre>input:empty { border: 1px solid pink; } input { border: 1px solid black; }</pre><p><img src="/Uploads/news/d0642f2df69a573565c96640eb483361/1625538417329812.png" title="1625538417329812.png" alt="8.png"/></p><p>期待：</p><ul><li>如果为空则为粉红色</li><li>如果不为空为黑色</li></ul><p>嗯...从这里开始，您可能会认为 <code>:empty</code> 似乎在起作用，因为我们看到的是粉红色边框。但这实际上不起作用</p><p>粉红色显示的原因是因为伪类增加了特异性，类似于类选择器（即 <code>.form-input</code>）比类型选择器（即 <code>input</code>）具有更高的特异性。高特异性选择器将始终覆盖低特异性设置的样式。</p><p>这是判决！不要使用 <code>:empty</code> 检查输入元素是否为空</p><h3><strong>如何在没有占位符的情况下检查输入是否为空？</strong></h3><p>好了，所以我们检查输入是否为空的唯一方法是使用 <code>:placeholder-shown</code>。但是，如果我们的输入元素没有占位符，会发生什么情况？好吧，这是一个聪明的方法！传入一个空字符串 <code>" "</code>。</p><pre><input placeholder=" "></pre><pre>input:placeholder-shown { border-color: pink; }</pre><p><img src="/Uploads/news/d0642f2df69a573565c96640eb483361/1625538630753800.gif" title="1625538630753800.gif" alt="12.gif"/></p><h2><strong>与其他选择器组合</strong></h2><p>所以，我们可以针对显示占位符文字的输入元素，这很酷。换句话说，如果显示了占位符文本，那么一定意味着该元素是空的。利用这些知识，我们可以将这个伪类与其他选择器结合起来，做一些非常整洁的事情！让我们来看看。</p><h3><strong>反向 <code>:placeholder-shown</code> 为 <code>:not</code></strong></h3><p>我们可以使用 <code>:not</code> 伪类来做一些反向的事情。在这里，我们可以在输入不是空的时候进行目标操作。</p><pre><input placeholder="placeholder" value="not empty" /></pre><pre>input:not(:placeholder) { border-color: green; }</pre><p><img src="/Uploads/news/d0642f2df69a573565c96640eb483361/1625538639610588.gif" title="1625538639610588.gif" alt="13.gif"/></p><p>结果：</p><ul><li>绿色，如果不为空，则表示用户已经输入了一些内容。</li><li>如果为空，则为黑色</li></ul><h3><strong>浮动标签</strong></h3><p>使用占位符而不使用标签的问题之一就是无障碍，因为一旦你在打字的时候，占位符文字就没有了，这可能会导致用户的困惑。一个真正好的解决方案是浮动标签。最初，占位符文本显示时没有标签，而一旦用户开始输入，标签就会出现。这样一来，你仍然可以在不影响用户体验和可访问性的前提下，保持表单的简洁性。双赢</p><p>而这是可以用纯CSS实现的，我们只需要将 <code>placeholder-shown</code> 与 <code>:not</code> 和 <code>+</code> 结合起来就可以了。这是一个超级简化版的浮动标签。</p><pre><input name="name" placeholder="Type name..." /> <label for="name">NAME</label></pre><pre>label { display: none; position: absolute; top: 0; } input:not(:placeholder-shown) + label { display: block; }</pre><p><img src="/Uploads/news/d0642f2df69a573565c96640eb483361/1625538648908456.gif" title="1625538648908456.gif" alt="14.gif"/></p><h2><strong>浏览器支持</strong></h2><p>对 <code>:placeholder-shown</code> 的支持非常好！这包括Internet Explorer（是的，我和你一样惊讶）。但是，对于IE，你需要使用非标准名称 <code>:-ms-input-placeholder</code>。</p><p><img src="/Uploads/news/d0642f2df69a573565c96640eb483361/1625538475504032.png" title="1625538475504032.png" alt="11.png"/></p><blockquote><p>本文转载自：https://segmentfault.com/a/1190000039928413</p><p>作者：杜尼卜</p></blockquote><p>更多编程相关知识，请访问：编程入门！！</p><p>以上就是CSS中什么是:placeholder-shown？如何工作？有什么用？的详细内容，更多请关注https://www.sxiaw.com/其它相关文章！</p></span> </div> </article> <aside class="swnetnews"> <div class="lis"> <span><i>推荐内容</i></span> <ul> <li><a href="/doc/8035.html" title="c语言中用于实现循环结构的三种基本语句是什么" target="_blank">c语言中用于实现循环结构的三种基本语句是什么</a></li><li><a href="/doc/9436.html" title="无法加载windows系统，发生内部错误怎么办？" target="_blank">无法加载windows系统，发生内部错误怎么办？</a></li><li><a href="/doc/8014.html" title="使用滴滴出行分享个人位置实时的具体步骤" target="_blank">使用滴滴出行分享个人位置实时的具体步骤</a></li><li><a href="/doc/1619.html" title="golang不主流吗" target="_blank">golang不主流吗</a></li><li><a href="/doc/10445.html" title="浅析php类中调用其它类中的几种方法" target="_blank">浅析php类中调用其它类中的几种方法</a></li><li><a href="/doc/9282.html" title="PHP高并发情形下怎么防止商品库存超卖" target="_blank">PHP高并发情形下怎么防止商品库存超卖</a></li><li><a href="/doc/8134.html" title="Dubbo 为什么用 Go 重写？" target="_blank">Dubbo 为什么用 Go 重写？</a></li><li><a href="/doc/6247.html" title="PHP数据类型之什么是浮点型？如何使用PHP浮点型？" target="_blank">PHP数据类型之什么是浮点型？如何使用PHP浮点型？</a></li><li><a href="/doc/9615.html" title="Redis 中如何使用 scan 替换 keys" target="_blank">Redis 中如何使用 scan 替换 keys</a></li><li><a href="/doc/3712.html" title="vscode怎么创建自定义代码模板" target="_blank">vscode怎么创建自定义代码模板</a></li> </ul> </div> </aside> </main> <script> // first, find all the div.code blocks document.querySelectorAll('pre').forEach(el => { // then highlight each hljs.highlightElement(el); hljs.lineNumbersBlock(el); }); </script> <link rel="stylesheet" type="text/css" href="/kan/css/basezb.css"> <script type="text/javascript" src="/kan/js/read.js"></script> <div style="display:none"> <div class="login-box" id="login-dialog"> <div class="login-top"><a rel="nofollow" id="login1" onclick="setTab('login',1,2);" >登录</a></div> <div class="login-form" id="nav-signin">  <div class="login-box-form" id="con_login_1"> <form id="loginform" action="/user-center-login.html" method="post" onsubmit="return false;"> <p class="int-text"> <input class="email" id="username" name="username" type="text" value="用户名或Email" onfocus="if(this.value=='用户名或Email'){this.value='';}" onblur="if(this.value==''){this.value='用户名或Email';};" ></p> <p class="int-text"> <input class="password1" type="password" id="password" name="password" value="******" onBlur="if(this.value=='') this.value='******';" onFocus="if(this.value=='******') this.value='';" > </p> <p class="int-info"> <label class="ui-label"> </label> <label for="agreement" class="ui-label-checkbox"> <input type="checkbox" value="" name="cookietime" id="cookietime" checked="checked" value="2592000"> <input type="hidden" name="notforward" id="notforward" value="1"> <input type="hidden" name="dosubmit" id="dosubmit" value="1">记住我的登录 </label> <a rel="nofollow" class="aright" href="/user-center-forgetpwd.html" target="_blank"> 忘记密码？ </a></p> <p class="int-btn"><a rel="nofollow" id="loginbt" class="loginbtn"><span>登录</span></a></p> </form> </div> </div> </div> </div> </div> <script type="text/javascript" src="/kan/js/foot_js.js"></script> <div id="footer"> <div class="w1200"> <p class="tips_text">本网站为非赢利性站点，本网站所有内容均来源于互联网相关站点自动搜索采集信息，相关链接已经注明来源。</p> <p class="tips_text">Copyright © 2004-2018 https://www.sxiaw.com. All Rights Reserved.<script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?fa236be8ec7680639fbd4ee307fd0c69"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <a href="http://beian.miit.gov.cn/" target="_blank">津ICP备2023001793号-1</a></p> </div> </div> </body> </html>