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

文章在个人网站中发布,原文链接:纯CSS实现一个炫酷的输入框效果

先看效果

:valid:invalid伪类

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

代码也非常简单:

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

required属性

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

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

pattern属性

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

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

完整代码

<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>

相关知识

表单数据校验
:valid伪类
:invalid伪类
required属性
pattern属性

posted @ 2025-06-15 13:50  粥粥粥菌  阅读(49)  评论(0)    收藏  举报