标签：
?
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;
}
标签：
原文地址：http://www.cnblogs.com/lifi/p/5728711.html
