伪类表单控件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>伪类表单控件</title>
<link rel="stylesheet" href="static/CSS/style4.css">
</head>
<style>div {
width: 500px;
height: 400px;
border: 1px solid ;
/*background-color: lightgreen;*/
/*text-align: center;*/
margin-left: 20px;
padding-left: 20px;
}
#verdfiy {
width: 74px;
}
/*表单可用区域背景设置*/
form :enabled {
background-color: lightblue;
}
/*选中项目字体颜色设置*/
form :checked + label {
color: red;
}
/*表格内填写数据有效性，未测试*/
form :invalid {
color: red;
}
/*焦点区域格式*/
form :focus {
background-color: yellow;
}
/*使用属性选择器进行选择对应按钮再进行样式选择*/
button[name="sbm"]:hover {
width: 60px;
height: 25px;
background-color: black;
color: white;
}
</style>
<body>
<h1>注册/登录</h1>
<hr>
<div>
<form action="" method="post">
<p>
<label for="username">姓名：</label>
<input type="text" id="username" placeholder="手机号/邮箱">
</p>
<p>
<label for="username">密码：</label>
<input type="password" id="password" placeholder="字母和数字不低于8位" autocomplete="new-password">
</p>
<p>
<label for="verdfiy">验证码：</label>
<input type="text" id="verdfiy"> <button type="button">点击发送</button>
</p>
<p>
<label >保存时间</label>
<input type="radio" name="limit" value="week" id="week" ><label for="week" >一周</label>
<input type="radio" name="limit" value="month" id="month"><label for="month" >一个月</label>
</p>
<button type="submit" name="sbm">登录</button>
<button type="reset">重置</button>
</form>
</div>
</body>
</html>
