伪类中的valid和invalid_html/css_WEB-ITnose

在CSS3之前,我们在处理输入框的判断输入是否正确时,都会做相应的输入样式来提醒用户输入的正确性.而CSS3中已经增加了这一特性,valid和invalid这两个伪类.这两个主要作用在input输入框上.

我们来看看一个提交建议的实例界面很简单主要是:

结构代码里,用户名是必须要输入的,email是可选的,建议内容字符在4到20个字符之间(这里配合的pattern属性的用法).

我们接着写出CSS代码,其实就是改变其输入框的背景.

input:valid{

background-color: #44b549;

}

input:invalid {

background-color: crimson;

}

最后的界面效果如下:

大家试着输入相应的匹配文字或者不匹配的文字,看看效果如何!看看是否对比有很大帮助!

编程的人正在在线培训 "前端编程开发","后端开发","移动开发"等, 需要学习的可以加入群或者微信留言 原创内容,转载请注明出处. 公众微信号:bianchengderen QQ群: 186659233 欢迎大家传播与分享.

融入编程人的生活,了解他们的思维模式,了解他们的喜怒哀乐,关注编程的人.

查看更多关于伪类中的valid和invalid_html/css_WEB-ITnose的详细内容...