常用的伪类和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>formtitle><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>
Copyright © 2004-2024 Ynicp.com 版权所有 法律顾问:建纬(昆明)律师事务所 昆明市网翼通科技有限公司 滇ICP备08002592号-4
