效果图
<!DOCTYPE HTML><HTML lang="en"head> Meta charset="UTF-8"Title>form</style> .container{margin:100px;position relativeFont-size14px} inputwIDth140pxheight30pxline-heightborder1px solID #999outlinenonetext-indent40pxTransitionall .3sborder-radius 3px .Title absolutetop1pxleft2px 30px input:focus,input:hover4px input:focus+.Title,input:hover+.TitletransformtranslateX(-120%) input:valID~label:aftercontent"邮箱格式正确"colorgreen input:invalID~label:after"邮箱格式不正确"red input:valID1px solID green input:invalID1px solID red} bodydiv class="container"> form action="#"> input type="email" ID required placeholder="输入邮箱"span ="Title">邮箱spanlabel for="email"></labelformdiv>HTML>
补充：
::after 和 :after是一样的效果，两个冒号语义更明确，但一个冒号兼容性更好
总结
以上是内存溢出为你收集整理的valid和invalid伪类美化表单案例全部内容，希望文章能够帮你解决valid和invalid伪类美化表单案例所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）