# 快速导航

# 单个输入框表单聚焦时输入框变化

点击即可查看代码

html 结构代码

<input type="text" placeholder="请输入您的姓名" />
1

css 代码,当然你使用类选择器也是可以的,这里我使用了 css 的属性选择器 关于选择器的优先级,可自行尝试测试:内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器

具体可参考文档css 样式优先级

input[type='text'] {
  height: 40px;
  width: 200px;
  background: transparent; // 背景透明
  border: none;
  border-bottom: 1px solid #999;
  text-indent: 20px;
  transition: 0.3;
  outline: none;
}
input[type='text']:hover {
  // 鼠标经过输入框时,更改border颜色
  border-color: #42b983;
}

input[type='text']:focus {
  // 鼠标聚焦焦点时
  border-bottom-color: #f1190d;
}

input[type='text']::-webkit-input-placeholder {
  // 实现该效果主要在这里
  transition: 0.5s; // 过度0.5s
  font-size: 14px; // 字体变为14px
  transform-origin: top left; // 属性允许您改变被转换元素的位置,从上到左,x轴水平方向top,y轴垂直方向left
}

input[type='text']:focus::-webkit-input-placeholder {
  transform: scale(0.8) translateY(-10px); // 缩小0.8倍,同时向上垂直方向平移10px
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

# 多个输入框表单聚焦时输入框变化

姓名:
密码:
验证密码:
点击即可查看代码
input[type='text'],
input[type='password'] {
  height: 40px;
  width: 200px;
  background: transparent;
  border: none;
  border-bottom: 1px solid #999;
  text-indent: 20px;
  transition: 0.3;
  outline: none;
}
input[type='text']:hover,
input[type='password']:hover {
  border-color: #42b983;
}

input[type='text']:focus,
input[type='password']:focus {
  border-bottom-color: #f1190d;
}

input[type='password']::-webkit-input-placeholder,
input[type='text']::-webkit-input-placeholder {
  transition: 0.5s;
  font-size: 14px;
  transform-origin: top left;
}
input[type='password']:focus::-webkit-input-placeholder,
input[type='text']:focus::-webkit-input-placeholder {
  transform: scale(0.8) translateY(-10px);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

# 分析

实现这一效果,主要在于-webkit-input-placeholder这个伪元素的方式,结合 css 中的变换transform,缩小scale,与垂直方向平移

具体关于伪类与伪元素,可见伪类与伪元素

关注公众号

一个走心,有温度的号,同千万同行一起交流学习

加作者微信

扫二维码 备注 加群