CSS构造表单
- 表单标签使用
- 下拉菜单背景
- 滚动条的使用
- 结构化表单布局
1.表单标签的使用
<label for="name">姓名: </ label><input type="text" name="name" id="name" />
2.去掉默认的表单间隔
Form {
Margin: 0;
Padding: 0;
}
3.给文本框添加漂亮的边框
Input,textarea {
Border: 3px double #333;
}
- 给下拉菜单设置背景色
select {
background:red;
}
- 给文本区域添加滚动条
textarea {
SCROLLBAR-FACE-COLOR: #333;
SCROLLBAR-HIGHLIGHT-COLOR: #666;
SCROLLBAR-SHADOW-COLOR: #333;
SCROLLBAR-3DLIGHT-COLOR: #999;
SCROLLBAR-ARROW-COLOR: #999;
SCROLLBAR-TRACK-COLOR: #000;
SCROLLBAR-DARKSHADOW-COLOR: #000;
}
6.表单外边框设置fieldset legend
Fieldset {
Margin:0 0 10px 0;
Padding: 5px;
Border: 1px solid #333;
}
Legend {
Background-color: #ddd;
Margin:0;
Padding: 5px;
Border-style: solid;
Border-width: 1px;
Border-color: #fff #aaa #666 #fff;
}
Fieldset {
Background: #ddd;
}
7.结构化表单布局
<form id="regForm">
<fieldset>
<legend>登陆信息</legend>
<div class="dataArea frist">
<label for="username">用户名：</label><input type="text" id="username" class="input" />
</div>
<div class="dataArea">
<label for="password">密码：</label><input type="text" id="password" class="input" />
</div>
<div class="dataArea">
<label for="passwordVerify">确认密码：</label><input type="text" id="passwordVerify" class="input" />
</div>
</fieldset>
<fieldset>
<legend>个人信息</legend>
<div class="dataArea frist">
<label for="nickname">昵称：</label><input type="text" id="nickname" />
</div>
<div class="dataArea">
<label for="email" class="hint">电子邮件：</label><input type="text" id="email" />
</div>
<div class="subArea">
<input type="submit" value="注册" /> <input type="button" value="返回" />
</div>
</fieldset>
</form>
#regForm fieldset {
padding:0 20px 10px;
border:0;
border-top:1px #d0d0bf solid;
}
#regForm legend {
padding:0 10px;
font-weight:bold;
}
#regForm .dataArea {
padding:2px 0;
}
#regForm .frist {
padding:8px 0 2px;
}
#regForm .subArea input {
padding:1px 4px;
}
#regForm label {
width:110px;
text-align:right;
float:left;
}
