HTML5伪类选择器

最新推荐文章于 2025-06-12 11:23:36 发布

原创最新推荐文章于 2025-06-12 11:23:36 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

html+css 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何使用CSS伪类为表单元素添加不同状态的样式，包括必填项、有效及无效输入状态，并通过图片提示增强用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

input : required 选择必填表单域

input : focus : invalid 选择当前聚焦的且含有非法输入值的表单域

input : focus : valid 选择当前聚焦的且含有合法输入值的表单域

使用上面的伪类选择器再编写三条新规则：

input : required {
border : 1px solid red;
}

//输入值不符合格式时，表单右边出现×
input : :focus : invalid {
background:url('../img/cross.png') no-repeat right;  //×图片
}

//输入值符合格式时，表单右边出现√
input : :focus : valid {
background:url('../img/tick.png') no-repeat right;  //√图片
}