valid和invalid伪类美化表单案例

最新推荐文章于 2022-12-10 22:03:45 发布

asxxf

最新推荐文章于 2022-12-10 22:03:45 发布

阅读量315

点赞数

分类专栏：笔记文章标签： html5

本文链接：https://blog.csdn.net/asxxf/article/details/104850427

版权

valid和invalid伪类美化表单案例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form</title>
<style>
.container{margin:100px;position: relative;font-size:14px;}
input{width:140px;height:30px;line-height:30px;border:1px solid #999;outline:none;text-indent:40px;transition:all .3s;border-radius: 3px;}
.title{position: absolute;top:1px;left:2px;line-height: 30px;height:30px;transition:all .3s;}
input:focus,input:hover{text-indent:4px;}
input:focus+.title,input:hover+.title{transform:translateX(-120%);}
input:valid~label:after{content:"邮箱格式正确";color:green;}
input:invalid~label:after{content:"邮箱格式不正确";color:red;}
input:valid{border:1px solid green;}
input:invalid{border:1px solid red;}
</style

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

asxxf

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
valid和invalid伪类美化表单案例

valid和invalid伪类美化表单案例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>form</title> <style> .container{margin:100...
复制链接

扫一扫