<!DOCTYPE html>
<html>
<head>
<style>
input:optional { background-color: lightgreen;
}
input:required { background-color: pink;
border-color: red;
}
.req { color: red;
}
</style>
</head>
<body>
<h1>:optional 和 :required 演示</h1>
<form>
<label for="name">姓名：</label><br>
<input id="name" name="name" type="text" /><br>
<label for="email">邮箱：<span class="req">*</span></label><br>
<input id="email" name="email" type="email" required /><br>
<label for="country">国家：</label><br>
<input id="country" name="country" type="text" />
<p><span class="req">*</span> 必填字段</p>
</form>
</body>
</html>