标签搜索
隐藏侧边栏

输入框太无趣?试试这个交互!-placeholder-shown

搞前端的半夏
2022-05-10 / 0 评论 / 0 点赞 / 17 阅读 / 1,763 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-05-10,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

大家好,我是半夏👴,一个刚刚开始写文的沙雕程序员.如果喜欢我的文章,可以关注➕ 点赞 👍 加我微信:frontendpicker,一起学习交流前端,成为更优秀的工程师~关注公众号:搞前端的半夏,了解更多前端知识! 点我探索新世界!

前言

可浮动placeholder,让你的登录不再枯燥!一文中我们介绍了如何利用pointer-events和:focus 实现浮动的placeholder,本来那篇文章写完是要写这篇文章的,因为在那篇文章中,其实是有一个BUG的,当输入框unfocus的时候,image-20211101152257678

会出现文字重叠的效果,奈何CSS并不提供:unfocus。很多人第一印象应该是用JS去解决,其实并不需要,在CSS中有这个属性::placeholder-shown可以很方便的解决这个BUG。

兼容性

请注意最下面,给出了使用提示。在火狐和IE,最好加上对应的前缀!!!

image-20211101153049529

:placeholder-shown

:placeholder-shown是一个伪类选择器,主要是用来设定 当input/text-area存在占位符文本,整个元素呈现的样式。

使用介绍

input {
  border: 2px solid black;
}
input:placeholder-shown {
  border-color: red;
}

<input type="text" placeholder="占位符"/>
<input type="text" />
<input type="text" />

对于同样的样式,带有占位符的input边框则是红色。当没有占位符时:无论输入框是否已经获取到焦点或者有输入文字,都不会变成红色。

image-20211101154434051

奇奇怪怪

  input:placeholder-shown {
      color:red;
      font-size: 10px;
      border-color: red;
      font-style: italic;
}

对于:placeholder-shown来说,他是针对输入的,我的理解呢?上面的代码是对占位符不生效的!!正常来说我们对placeholder的样式设置,我们应该是使用::placeholder为元素的。但是最后显示的结果确实出乎我的意料。除了颜色,其他效果都是正常显示的。

image-20211101160656278

此时我又在上面代码的基础上。加上了::placeholder

   input::placeholder{
        font-size: 20px;
        font-style: normal;
        color:blue;
      }  

image-20211101160838810

此时占位符完全按照::placeholder设定进行呈现。

这里我猜测: ::placeholder 部分属性对占位符生效,此时占位符继承了input的样式,希望懂得大佬可以教教我!!!

浮动占位符

设计一个输入框

<div class="login-info">
    <input type="text" name="" required="" placeholder=" "/>
    <label>请输入用户名</label>
</div>

这里的请输入用户名是label呈现的

.login-form .login-info {
	position: relative;
}

.login-form .login-info label {
	position: absolute;
	//调整位置,放入输入框
}

注意:因为:placeholder-shown只有在有占位符的时候才生效,我们这里给了占位符一个空格!!!

image-20211101162007739

成型

之前我们只对:focus进行了设置,会导致文字重叠。现在使用not(:placeholder-shown),来解决这个bug。

   .login-form .login-info input:not(:placeholder-shown) ~ label,
      .login-form .login-info input:focus ~ label {
        top: -20px;
        left: 0;
        color: rgb(29, 155, 240);
        font-size: 12px;
        z-index: 1;
      }

这里我输入完,input失去焦点,文字并不会重叠!!!!

image-20211101162441231

0

评论区