<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.container{
max-width: 400px;
margin: 20px auto;
}
input,select,textarea{
width: 240px;
margin: 10px 0;
border: 1px solid #999;
padding: 0.5em 1em;
}
label{margin-left: 10px;color:#999;}
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,select,textarea{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-color: #cc00aa;
border: 2px solid #aa0088;
padding:10px 0;
color: #fff;
}
input[type="submit"]:hover{
background-color: #aa0088;
}
</style>
</head>
<body>
<div class="container">
<form>
<input type="name" required><label>名称</label>
<input type="email" required><label>邮箱</label>
<input type="tel"><label>手机</label>
<input type="url"><label>网站</label>
<select name="#">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<textarea cols="30" rows="10" placeholder="留言（必填）" required=""></textarea>
<input type="submit" value="提交表单">
</form>
</div>
</body>
</html>
