<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
#login {
width: 400px;
padding: 1em 2em 0 2em;
font-size: 12px;
}
#login input:disabled#name {
border: 1px solid #fff;
}
#login input:disabled#password {
border: 1px solid #fff;
}
label {
line-height: 20px;
display: block;
font-weight: bold;
}
#name,
#password {
border: 1px solid #ccc;
width: 160px;
height: 22px;
padding-left: 20px;
margin: 6px 0;
line-height: 20px;
}
.button {
margin: 6px 0;
}
</style>
</head>
<body>
<h1>设计可用的表单</h1>
<fieldset id="login">
<legend>用户登录</legend>
<form action="" method="post" class="form">
<label for="name">姓名
<input name="name" type="text" id="name" value="" disabled="disabled" />
</label>
<label for="password">密码
<input name="password" type="text" id="password" value="" disabled="disabled" />
</label>
<input type="image" class="button" src="" />
</form>
</fieldset>
</body>
</html>
【CSS3实战】设计可用表达01
于 2023-07-10 23:39:52 首次发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)