文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2024-12-03 05:50

关注

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

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

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

它是如何工作的?

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

 

 

结果:

 

 

 

 

 

:placeholder-showd必须具有占位符

 

 

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

  1. -- 没有占位符 --> 
  2.  
  3. -- 这也被视为没有占位符文本 --> 
  4. "" /> 
  1. input:placeholder-shown { 
  2.   border-color: pink; 

 

 

:placeholder-shown vs ::placeholder

 

 

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

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

 

 

 

 

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

  1. input::placeholder { 
  2.   color: green; 

 

 

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

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

 

 

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

 

 

:placeholder-shown vs :empty

 

 

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

  1. "not empty"
  2. -- empty --> 
  3. input:empty { 
  4.   border: 1px solid pink; 
  5.  
  6. input { 
  7.   border: 1px solid black; 

 

 

期待:

 

 

 

 

 

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

 

 

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

 

 

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

 

 

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

 

 

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

  1. " ">-- 👈 传递空字符串 --> 
  2. input:placeholder-shown { 
  3.   border-color: pink; 

 

 

与其他选择器组合

 

 

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

 

 

反向 :placeholder-shown 为 :not

 

 

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

  1. "placeholder" value="not empty" /> 
  2. input:not(:placeholder) { 
  3.   border-color: green; 

 

 

结果:

 

 

 

 

 

浮动标签

 

 

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

 

 

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

  1. name="name" placeholder="Type name..." /> 
  2. for="name">NAME 
  3. label { 
  4.   display: none; 
  5.   position: absolute
  6.   top: 0; 
  7.  
  8. input:not(:placeholder-shown) + label { 
  9.   display: block; 

 

 

浏览器支持

 

 

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

 

来源:前端全栈开发者内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯