HTML5自带验证美化
程序员文章站
2022-06-17 21:35:49
常用的伪类和css选择器： :required :optional 必填元素和选填元素 :in-range :out-of-range 在范围之内和不在范围之内 :valid :invalid 符合要求的和不符合要求的 :read-only :read-write 只读和可读可写 （ :read-w ......
常用的伪类和css选择器：
:required :optional 必填元素和选填元素
:in-range :out-of-range 在范围之内和不在范围之内
:valid :invalid 符合要求的和不符合要求的
:read-only :read-write 只读和可读可写
（ :read-write除了匹配表单中可写的元素，也可以匹配div中可编辑可写入的元素）
<div contenteditable="true" ></div>
required和optional美化表单案例
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>form</title>
<style>
.container{max-width:400px;margin:20px auto;}
input,select,textarea{width:240px;border:1px solid #999;margin:10px auto;padding:.5em 1em;}
label{color:#999;margin-left:10px;}
input:required,textarea:required{
border-right:3px solid #aa0088;
}
input:optional,select:optional{
border-right:3px solid #999;
}
input:required+label::after{
content:"(必填)";
}
input:optional+label::after{
content:"(选填)";
}
input:focus,textarea:focus,select:focus{outline:0;}/*去掉选中时的蓝色外边框*/
input:required:focus,textarea:required:focus{box-shadow: 0 0 3px 1px #aa0088;}
input:optional:focus,select:optional:focus{box-shadow: 0 0 3px 1px #999;}
input[type=submit]{
background:#cc00aa;
color:#fff;
border:2px solid #aa0088;
padding:10px 0;
}
input[type=submit]:hover{
background:#aa0088;
}
</style>
</head>
<body>
<div class="container">
<form action="#">
<input type="text" required><label>名称</label>
<input type="email" required><label>邮箱</label>
<input type="tel"><label>手机</label>
<input type="url"><label>网址</label>
<select name="#">
<option value="1">非必填选项一</option>
<option value="2">非必填选项二</option>
<option value="3">非必填选项三</option>
<option value="4">非必填选项四</option>
</select>
<textarea name="#" cols="30" rows="10" placeholder="留言（必填）" required></textarea>
<input type="submit" value="提交表单">
</form>
</div>
</body>
</html>