前言

灵感来自油管 传送门

看到 chatGPT 官网的登陆页面有这个样式，看着挺好看，所以就去找了下教程，并且自己优化了一点，纯css实现

基础

首先创建一个盒子用于存放 input 和 label

1
2
3
4
<div class="inputBox">
	<input type="text" placeholder=" " class="input" id="input-userName">
	<label for="input-userName" class="label">用户名</label>
</div>

给他们加上样式

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
body {
    /* 设置弹性盒子 */
    display: flex;
    /* 居中 */
    align-items: center;
    justify-content: center;
    /* 填充满屏幕 */
    width: 100%;
    height: 100vh;
}

.inputBox {
    /* 子绝父相，故设置父元素为相对定位 */
    position: relative;
}

.input {
    /* 取消自带样式轮廓 */
    outline: none;
    /* 添加边框 */
    border: 2px solid #000;
    /* 添加内边距 */
    padding: 5px;
    /* 添加圆角 */
    border-radius: 5px;
}

.label {
    /* 设置绝对定位，脱离文档流 */
    position: absolute;
    /* 设置居中 */
    top: 50%;
    transform: translateY(-50%);
    /* 强制不换行 */
    white-space: nowrap;
    /* 设置左边距离 */
    left: 15px;
    /* 设置字体大小 */
    font-size: 12px;
    /* 设置字体粗细 */
    font-weight: bold;
    /* 添加上过渡动画 */
    transition: all .2s;
	/* 设置左右内边距 */
	padding: 0 3px;
}

添加上获得焦点样式，

.input:not(:placeholder-shown).input:not(:focus) ~ .label 的意思是：

当输入框不具有占位符、且不处于焦点状态时选择其后的兄弟元素中类名为 “label” 的元素

1
2
3
4
5
6
7
8
9
.input:focus ~ .label,
.input:not(:placeholder-shown).input:not(:focus) ~ .label {
	/* 将提示文字移到上方 */
	top: 1.5px;
	/* 将提示文字向左移 */
	left: 10px;
	/* 显示背景，覆盖掉边框 */
	background: #fff;
}

至此，最基本的样子就有了，只需要再加上一点点的样式

进阶

获得焦点的颜色样式

1
2
3
4
5
6
7
8
9
.input:focus {
    /* 更改边框颜色 */
	border: 2px solid rgb(0, 200, 255);
}

.input:focus ~ .label {
    /* 更改字体颜色 */
	color: rgb(0, 200, 255);
}