详解：17 :valid :invalid

最新推荐文章于 2022-07-19 22:08:56 发布

贵哥的编程之路(热爱分享)

最新推荐文章于 2022-07-19 22:08:56 发布

阅读量569

点赞数

分类专栏： CSS3最详解

本文链接：https://blog.csdn.net/qq_37805832/article/details/105763634

版权

CSS3最详解专栏收录该内容

54 篇文章 1 订阅

订阅专栏

核心：这里记住了哈，作用的可是type=“email”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        input[type="email"]:valid
        {
            color: red;
        }
        input[type="email"]:invalid
        {
            background-color: yellow;
        }
        
    </style>
</head>
<body>
    <form>
        用户名:<input type="text" name="username" id="" placeholder="请输入" required="required" ><br>
        密码:<input type="password" name="password" id="" required="required" placeholder="你输入"><br>
        邮箱:<input type="text" name="email" id="" required="required"  placeholder="请输入"><br>
        年龄:<input type="text" name="age" id="" placeholder="输入"><br>
        性别:<input type="radio" name="sex" id="" value="1">男
        <input type="radio" name="sex" id="" value="2">女
        <input type="radio" name="sex" id="" value="3" checked="checked">保密<br>
        兴趣爱好:
        <input type="checkbox" name="fav[]" id="" value="1" checked="checked" />PHP
        <input type="checkbox" name="fav[]" id="" value="2" checked="checked" />PHP
        <br>    
        <input type="email" placeholder="aa">
        <input type="submit" name="" value="reg">
    </form>
</body>
</html>