详解：17 :valid :invalid
核心：这里记住了哈，作用的可是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>核心：如果 input 元素中输入的值为合法的，设置其为黄色:，否则呢，前面加一个in，记住了，大多数的选择器如果no前面都是in
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2020/04/26 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
