valid和invalid伪类美化表单案例

最新推荐文章于 2023-05-09 15:15:44 发布

buzul

最新推荐文章于 2023-05-09 15:15:44 发布

阅读量206

点赞数

分类专栏：技术

原文链接：https://www.colorgg.com

版权

技术专栏收录该内容

559 篇文章 16 订阅

订阅专栏

效果图

<!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>
</head>
<body>
    <div class="container">
        <form action="#">
            <input type="email" id="email" required placeholder="输入邮箱">
            <span class="title">邮箱</span>
            <label for="email"></label>
        </form>
    </div>

</body>
</html>

补充：

::after 和 :after是一样的效果，两个冒号语义更明确，但一个冒号兼容性更好

buzul

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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...
复制链接

扫一扫

专栏目录