纯CSS实现一个炫酷的输入框效果

先看效果

username

`:valid`与`:invalid`伪类

这两个伪类可以用于input元素和select元素，用于选中校验通过和未校验通过的输入框。我们通过下边这个简单的小案例了解一下它们：
这个输入框会校验输入是否是个电子邮箱地址，否则背景颜色将红色警告。

代码也非常简单：

1
2
3
4
5


<input class="demo-input-2" type="email"/>
<style>
	//invalid伪类可以选中不能通过校验的input
	.demo-input-2:invalid{background:red}
</style>

`required`属性

这个属性可以用在input，select元素上，表示这个输入框是必填的。如果留空，将无法通过校验，可以被:invalid伪类选中，否则被:valid选中，例如：
这个输入框不能留空，否则背景颜色将红色警告。

1
2
3
4


<input class="demo-input-3" type="email"/>
<style>
	.demo-input-2:invalid{background:red}
</style>

`pattern`属性

这个属性可以用在input，select元素上，它的属性值需要填入一个正则表达式。如果输入框内容不符合正则表达式，可以被:invalid伪类选中，否则被:valid选中，例如：
这个输入框只能输入六位数字，否则背景颜色将红色警告。

1
2
3
4


<input class="demo-input-4" type="email"/>
<style>
	.demo-input-4:invalid{background:red}
</style>

完整代码

 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


<div class="demo-input">
	<input required/>
	<label>username</label>
</div>
<style>
	.demo-input{
		position: relative;
		height: 40px;
		width: 300px;
		margin: 8px;
	}
	.demo-input *{transition-duration: 100ms}
	.demo-input input{
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		border: 2px solid gray;
		border-radius: 6px;
		outline: none;
		padding-left: 10px;
		font-size: 20px;
		color: #006080;
	}
	.demo-input input:valid,
	.demo-input input:focus
	{border: 2px solid #006080}
	.demo-input label{
		position: absolute;
		top:0;
		left: 10px;
		font-size: 20px;
		color: grey;
		line-height: 36px;
		pointer-events: none;
	}
	.demo-input input:valid + label,
	.demo-input input:focus + label
	{
		color: #006080;
		top:-12px;
		font-size: 18px;
		padding: 0 4px;
		background-color: white;
		line-height: 18px;
	}
</style>

纯CSS实现一个炫酷的输入框效果

通过:valid伪类和required属性纯css实现动态label输入框

先看效果

`:valid`与`:invalid`伪类

`required`属性

`pattern`属性

完整代码

相关知识

先看效果

:valid与:invalid伪类

required属性

pattern属性

完整代码

相关知识

`:valid`与`:invalid`伪类

`required`属性

`pattern`属性