输入太无趣？试试这个交互！

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

前言

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

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

兼容性

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

: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边框则是红色。当没有占位符时：无论输入框是否已经获取到焦点或者有输入文字，都不会变成红色。

奇奇怪怪

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

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

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

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

此时占位符完全按照::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只有在有占位符的时候才生效，我们这里给了占位符一个空格！！！

成型

之前我们只对: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失去焦点，文字并不会重叠！！！！