CSS使用placeholder-shown伪类实现输入框浮动文字效果

使用placeholder-shown伪类可以实现输入框的浮动文字效果，可以增加用户交互体验，下面是使用该伪类实现输入框浮动文字效果的详细攻略。

使用placeholder-shown伪类可以实现输入框的浮动文字效果，可以增加用户交互体验，下面是使用该伪类实现输入框浮动文字效果的详细攻略。

1. 设置输入框样式

首先需要设置输入框的基本样式，包括输入框的边框颜色、宽度、高度等信息。输入框的样式可以自定义，下面是一个简单样例：

input {
  border: 1px solid #ccc;
  height: 40px;
  width: 100%;
}

2. 添加动态浮动文字

在输入框的父元素中添加一个label元素，用于展示输入框的浮动文字。同时在该label元素中添加浮动文字的样式。下面是示例代码：

<div>
  <input type="text" name="username" />
  <label for="username">Username</label>
</div>

label {
  position: absolute;
  top: 13px;
  left: 10px;
  transition: all 0.2s ease;
  pointer-events: none;
  font-size: 16px;
  color: #999;
}

其中，label元素的position属性设置为absolute，用于定位元素，top和left属性用于设置元素的位置，通过transition属性设置动画效果，pointer-events属性设置为none，用于让鼠标事件穿透到input元素之下，避免影响用户的输入。font-size和color属性用于设置浮动文字的字体样式。

3. 使用placeholder-shown伪类实现效果

使用placeholder-shown伪类来控制浮动文字的状态，当input元素的placeholder值被显示时，即输入框被聚焦或输入框中存在值时，浮动文字的样式会发生改变。

input:focus + label,
input:not(:placeholder-shown) + label {
  top: -10px;
  font-size: 12px;
  color: #007acc;
}

其中，input:focus + label选择器表示当输入框聚焦时，label元素的样式发生改变。input:not(:placeholder-shown) + label选择器表示当输入框中存在值时，label元素的样式也会发生改变。这两种情况下，都将label元素的top值设置为-10px，即将浮动文字向上移动。同时修改浮动文字的样式，将字体变小、颜色变为蓝色。

示例1

下面是一个完整的示例，可以将其复制到HTML和CSS文件中查看效果：

<div>
  <input type="text" name="username" placeholder=" " />
  <label for="username">Username</label>
</div>

div {
  position: relative;
  margin: 50px auto;
  width: 400px;
}
input {
  border: none;
  background: none;
  height: 45px;
  width: 100%;
  border-bottom: 2px solid #ccc;
  font-size: 18px;
  color: #333;
}
label {
  position: absolute;
  top: 15px;
  left: 0;
  font-size: 18px;
  color: #999;
  pointer-events: none;
  transition: 0.2s ease all;
}
input:focus + label,
input:not(:placeholder-shown) + label {
  top: -20px;
  font-size: 14px;
  color: #007acc;
}

示例2

下面是另一个示例，可以将其复制到HTML和CSS文件中查看效果：

<div>
  <input type="email" name="email" placeholder=" " required />
  <label for="email">Email address</label>
</div>

div {
  position: relative;
  margin: 50px auto;
  width: 400px;
}
input {
  border: none;
  background: none;
  height: 45px;
  width: 100%;
  border-bottom: 2px solid #ccc;
  font-size: 18px;
  color: #333;
}
label {
  position: absolute;
  top: 15px;
  left: 0;
  font-size: 18px;
  color: #999;
  pointer-events: none;
  transition: 0.2s ease all;
}
input:focus + label,
input:not(:placeholder-shown) + label {
  top: -20px;
  font-size: 14px;
  color: #007acc;
}

在这个示例中，我们增加了一些额外的输入验证，其中input元素的type属性设置为email，required属性表示该输入框为必填项。具体的效果可以通过复制示例代码实现。