CSS
在这里插.clearfix::after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
*zoom: 1;
}
* {
padding: 0;
margin: 0;
box-sizing: content-box;
}
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,
select:focus,
textarea: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;
}
.container {
max-width: 400px;
margin: 20px auto;
/* border: 1px solid #999; */
}
input,
select,
textarea {
width: 240px;
margin: 10px 0;
padding: .5em .1em;
border: 1px solid #999;
}
label {
margin-left: 10px;
color: #999;
}
input[type="submit"] {
background-color: #cc00aa;
border: 1px solid #aa0088;
padding: 10px 0;
color: #fff;
}
input[type="submit"]:hover {
cursor: pointer;
background-color: #aa0088;
}入代码片
HTML
<div class="container">
<form action="#">
<input type="name" id="name" required><label for="name">名称</label>
<input type="email" id="email" required><label for="email">邮箱</label>
<input type="tel" name="" id="tel"><label for="tel">手机</label>
<input type="url" name="" id="url"><label for="url">网址</label>
<select name="#" id="">
<option value="1">非必填选项1</option>
<option value="2">非必填选项2</option>
<option value="3">非必填选项3</option>
<option value="4">非必填选项4</option>
</select>
<textarea name="" id="" cols="30" rows="10" placeholder="留言(必填)" required></textarea>
<input type="submit" value="提交表单">
</form>
</div>