CSS的:Placeholder-Shown伪类有什么用？

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

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

 
 
 
 
      
  
  
  
  1. input:placeholder-shown { 
    2.   
  
  
  
  2.   border-color: pink; 
    3.   
  
  
  
  3. } 
    4.

它是如何工作的?

:placeholder-show 是CSS伪类，可让您将样式应用于具有占位符文本的 或  

结果：

  • 如果显示占位符，则为粉红色，表示用户未输入任何内容
  • 如果未显示任何占位符，则为黑色，表示用户已键入内容

:placeholder-showd必须具有占位符

如果元素没有占位符文本，则此选择器将不起作用。

 
 
 
 
      
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3.  
    4.   
  
  
  
  4.  
    5.  
 
 

 
 
 
 
      
  
  
  
  1. input:placeholder-shown { 
    2.   
  
  
  
  2.   border-color: pink; 
    3.   
  
  
  
  3. } 
    4.

:placeholder-shown vs ::placeholder

因此，我们可以使用 :placeholder-shown 设置输入元素的样式。

 
 
 
 
      
  
  
  
  1. input:placeholder-shown { 
    2.   
  
  
  
  2.   border: 1px solid pink; 
    3.   
  
  
  
  3.   background: yellow; 
    4.   
  
  
  
  4.   color: green; 
    5.   
  
  
  
  5. } 
    6.

??嗯...注意到有些奇怪??——我们将颜色设置为：绿色，但没有用。好吧，这是因为 :placeholder-shown 只针对输入本身。但是对于实际的占位符文本，您必须使用伪元素 ::placeholder。

 
 
 
 
      
  
  
  
  1. input::placeholder { 
    2.   
  
  
  
  2.   color: green; 
    3.   
  
  
  
  3. } 
    4.

但是!当我在处理这个问题时，我注意到还有一些其他属性，如果在 :placeholder-shown 级别应用，将会影响到占位符文本。

 
 
 
 
      
  
  
  
  1. input:placeholder-shown { 
    2.   
  
  
  
  2.   font-style: italic; 
    3.   
  
  
  
  3.   text-transform: uppercase; 
    4.   
  
  
  
  4.   letter-spacing: 5px; 
    5.   
  
  
  
  5. } 
    6.

现在，我真的不知道为什么会发生这种情况 ???? 也许是因为这些属性被占位符继承了。

:placeholder-shown vs :empty

尽管 :placeholder-shown 是专门用于确定元素是否显示占位符的。实际上，我们可以使用它来检查输入是否为空(当然，假设所有输入都有一个占位符)。因此，也许您的下一个问题是，我们不能使用CSS empty吗?好吧，让我们检查一下 ?????

 
 
 
 
      
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3. input:empty { 
    4.   
  
  
  
  4.   border: 1px solid pink; 
    5.   
  
  
  
  5. } 
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7. input { 
    8.   
  
  
  
  8.   border: 1px solid black; 
    9.   
  
  
  
  9. } 
    10.

期待：

  • 如果为空则为粉红色
  •  
  • 如果不为空为黑色

嗯...从这里开始，您可能会认为 :empty 似乎在起作用，因为我们看到的是粉红色边框。但这实际上不起作用??

粉红色显示的原因是因为伪类增加了特异性，类似于类选择器(即 .form-input)比类型选择器(即 input)具有更高的特异性。高特异性选择器将始终覆盖低特异性设置的样式。

这是判决!不要使用 :empty 检查输入元素是否为空?

如何在没有占位符的情况下检查输入是否为空?

好了，所以我们检查输入是否为空的唯一方法是使用 :placeholder-shown。但是，如果我们的输入元素没有占位符，会发生什么情况?好吧，这是一个聪明的方法!传入一个空字符串 " "。

 
 
 
 
      
  
  
  
  1.  
    2.   
  
  
  
  2. input:placeholder-shown { 
    3.   
  
  
  
  3.   border-color: pink; 
    4.   
  
  
  
  4. } 
    5.

与其他选择器组合

所以，我们可以针对显示占位符文字的输入元素，这很酷。换句话说，如果显示了占位符文本，那么一定意味着该元素是空的。利用这些知识，我们可以将这个伪类与其他选择器结合起来，做一些非常整洁的事情!让我们来看看 ??。

反向 :placeholder-shown 为 :not

我们可以使用 :not 伪类来做一些反向的事情。在这里，我们可以在输入不是空的时候进行目标操作。

 
 
 
 
      
  
  
  
  1.  
    2.   
  
  
  
  2. input:not(:placeholder) { 
    3.   
  
  
  
  3.   border-color: green; 
    4.   
  
  
  
  4. } 
    5.

结果：

  • 绿色，如果不为空，则表示用户已经输入了一些内容。
  •  
  • 如果为空，则为黑色

浮动标签

使用占位符而不使用标签的问题之一就是无障碍，因为一旦你在打字的时候，占位符文字就没有了，这可能会导致用户的困惑。一个真正好的解决方案是浮动标签。最初，占位符文本显示时没有标签，而一旦用户开始输入，标签就会出现。这样一来，你仍然可以在不影响用户体验和可访问性的前提下，保持表单的简洁性。双赢 ??

而这是可以用纯CSS实现的，我们只需要将 placeholder-shown 与 :not 和 + 结合起来就可以了。这是一个超级简化版的浮动标签。

 
 
 
 
      
  
  
  
  1.  
    2.   
  
  
  
  2. NAME 
    3.   
  
  
  
  3. label { 
    4.   
  
  
  
  4.   display: none; 
    5.   
  
  
  
  5.   position: absolute; 
    6.   
  
  
  
  6.   top: 0; 
    7.   
  
  
  
  7. } 
    8.   
  
  
  
  8.  
    9.   
  
  
  
  9. input:not(:placeholder-shown) + label { 
    10.   
  
  
  
  10.   display: block; 
    11.   
  
  
  
  11. } 
    12.

浏览器支持

对 :placeholder-shown 的支持非常好!这包括Internet Explorer(是的，我和你一样惊讶??)。但是，对于IE，你需要使用非标准名称 :-ms-input-placeholder。

网站标题：CSS的:Placeholder-Shown伪类有什么用？
分享网址：http://www.hantingmc.com/qtweb/news48/385298.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

定制网站知识

各行业网站

四川电信机房托管　　 　成都广告设计　　 　成都制作网站　　 　大英泰恒网站　　 　卡多尼人工智　　 　达州服务器托管　　 　全网营销网站推广　　 　成都ssl证书申请　　 　成都力比特　　 　成都添翼二手车　　 　高端网站建设　　 　网站制作　　 　微博营销　　 　重庆服务器托管　　 　成都网站建设流程　　 　电信服务器托管　　 　云服务器　　 　企业网站建设公司　　 　成都网络营销　　 　成都移动主机托管