美化表单样式-优快云博客

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>设置表单样式</title>
<style>
form.stylin_form1 {
width:14em; /* 表单整体宽度 */
margin:20px auto; /* 在容器内居中 */
border:1px solid #bbb7ae;
padding:.5em .5em .15em;
}
.stylin_form1 h3 { /* 表单主标题 */
margin:0;
padding:0 0 .2em .2em;
font-weight:600;
color:#bbb7ae;
}
.stylin_form1 fieldset { /*包含控件与标注*/
margin:0;
padding:0 0 .2em 0;
width:100%;
border:0;
}
/* legend 元素的位置不同寻常，所以我把它的文本包含在一个块级span 中，转而为span
设定样式 */
.stylin_form1 legend {
width:100%;
padding:.3em 0;
background:#bbb7ae; /*灰色条*/
}
.stylin_form1 legend span { /* 设定标题文本的样式 */
display:block;
font-size:1em;
line-height:1.1em;
padding: 0 0 0 .4em;
font-weight:700;
color:#fff; /*灰色条上的反白文本*/
}
.stylin_form1 section {
overflow:hidden; /* 强制section 包含表单控件及标注 */
padding:.2em 0 .4em 0;
border-bottom:8px solid #e7e5df; /* 根据需要在每个section 间增加间距 */
}
.stylin_form1 section:last-child { /* 每组最后一个section 没有边框 */
border-bottom:0px;
}
.stylin_form1 section label, /* 表单控件的标注 */
.stylin_form1 section h4 { /* h4 是复选框和单选按钮组的标题 */
display:block;
clear:both;
margin:.3em .3em 0 0; /* 右外边距确保标注文本在碰到input 之前会换行 */
padding-bottom:.1em;
font-size:.8em;
font-family:'Droid Sans';
font-weight:400;
line-height:1.1;
}
.stylin_form1 section label span, /* 星号表示必填字段 */
.stylin_form1 section h4 span {
font-size:.75em;
vertical-align:text-top;
color:#f00;
}
.stylin_form1 section p.note { /*说明星号是必填字段的文本*/
font-size:.7em;
color:#f00;
margin:0;
padding:0 0 .3em 0;
}
.stylin_form1 section input,
.stylin_form1 section textarea,
.stylin_form1 section select {
margin:.2em .5em .2em 0;
padding:.2em .4em; /* 给input 中的文本添加间距 */
color:#000;
box-shadow:1px 1px 3px #ccc;
font-size:.8em;
/* 针对Firefox - 没有这条声明会在textarea 上使用Courier */
font-family:inherit;
outline:none; /* 去掉默认蓝色聚焦轮廓线 */
}
/* 设定文本字段（文本、密码、日期、文本区等）的样式，并加圆角 */
.stylin_form1 section input,
.stylin_form1 section textarea {
width:12em; /*设定字段宽度*/
border:1px solid #bbb7ae;
border-radius:3px; /*圆角边框*/
}
.stylin_form1 section textarea {
height:5em; /* textarea 的高度 */
margin-top:.3em; /* 与上面label 的间距 */
line-height:1.1;
}
.stylin_form1 section p { /*控件使用说明*/
margin:.3em .75em 0;
clear:both;
font-size:.7em;
line-height:1.1;
color:#000;
}
.stylin_form1 section p.error {
color:#f00; /* 添加error 类，把说明文字设定为红色 */
}
.stylin_form1 section section { /* 控件/标注的内包装 */
overflow:hidden; /* 强制元素包围浮动标注 */
margin:.2em 0 .3em .4em;
padding:0 0 .1em 0;
border-bottom:none;
}
.stylin_form1 section section input { /*单选按钮或复选框*/
float:left;
clear:both;
width:auto; /* 重设继承的宽度 */
margin:.1em 0 0em .3em; /* 顶部与标注对齐，左侧防止intput 溢出 */
}
.stylin_form1 section section label {
float:left;
clear:none; /* 重设继承的值 */
width:15em;
margin:.15em 0 0 .6em; /* 在相邻的复选框之间、复选框与标注之间增加间距 */
font-weight:normal; /* 重设继承的值 */
font-size:.7em;
line-height:1.2;
}
.stylin_form1 section select {
margin-left:.4em;
font-size:.85em;
}
.stylin_form1 section input[type="submit"] { /*提交按钮*/
width:auto; /* 覆盖为其他字段设定的宽度 */
margin:.4em .3em 0 0;
font-size:1em;
font-weight:800;
color:#fff;
background-color:#bbb7ae;
cursor:pointer; /*在鼠标位于按钮之上时，把光标变成小手形状*/
}
.stylin_form1 > section:last-child { /*居中提交按钮*/
text-align:center;
}
form.stylin_form1.labels_left {
width:22em; /*加宽表单，为标注腾出地方*/
}
form.stylin_form1.labels_left label,
form.stylin_form1.labels_left h4 {
float:left; /*把标注浮动到控件左侧*/
width:8em;
}
form.stylin_form1.labels_left p {
margin:0 0 0 9.35em; /*缩进控件说明，以便它位于控件正下方*/
padding:.3em 0 0 0;
clear:both; /*确保说明不会跟着浮动的标注和控件走*/
}
form.stylin_form1.labels_left p.note { /*必填字段文本下方的间距*/
margin:0 0 .2em 0;
}
/*每个单选按钮或复选框及其标注的内包装*/
form.stylin_form1.labels_left section section {
width:10em;
margin-left:6.5em;
padding-top:0;
}
form.stylin_form1.labels_left section section input {
width:1.25em; /*单选按钮或复选框的宽度*/
margin-left:0;
}
.stylin_form1.labels_left section input,
.stylin_form1.labels_left section textarea,
.stylin_form1.labels_left section select {
float:left; /*让控件成为第二栏*/
width:12em;
}
.stylin_form1.labels_left section select { /*缩进选项列表*/
margin-left:.2em;
}
/*防止提交表单按钮继承浮动的行为*/
.stylin_form1.labels_left > section input[type=submit] {
float:none;
}
</style>

</head>
<body>

<form class="stylin_form1 labels_left" action="process_form.php" method="post">
<h3>A Stylin' Form</h3>

<fieldset>

<legend><span>Part 1 • Basic Controls</span></legend>

<section>
<p class="note">* indicates required field</p>

<label for="user_name">User Name<span> *</span></label>

<input type="text" id="user_name" name="user_name" />
<p>Please select a user name</p>
</section>

<section>
<label for="password">Password<span> *</span></label>

<input type="password" id="password" name="password" maxlength="20" />
<p>Password must be 8 or more characters</p>
</section>

<section>
<label for="description">Description</label>
<textarea id="description" name="description"
placeholder="Enter the description here."></textarea>
</section>

<section>
<label for="description">Date</label>
<input type="date" id="special_date" name="event_date" min="2012-09-05" />
</section>
</fieldset>
<fieldset>
<legend><span>Part 2 • Multiple-Choice Controls</span></legend>

<section>
<h4>Select Any Number</h4>
<section>
<input type="checkbox" id="check1" name="checkset" value="1"
tabindex="4" />
<label for="check1">Choice 1</label>
</section>
<section>
<input type="checkbox" checked="checked" id="check2" name="checkset" value="2" />
<label for="check2">Choice 2 is pre-checked</label>
</section>
<section>
<input type="checkbox" id="check3" name="checkset" value="3" />
<label for="check3">
Choice 3—add as many as you need!
</label>
</section>
<p>You must choose one or more</p>
</section>

<section>
<h4>Select Only One</h4>
<section>
<input checked="checked" id="radio1" name="radioset" type="radio"
value="Choice_1" />
<label for="radio1">
Choice 1 is pre-selected and shows the text
wraps nicely if it goes to multiple lines.
</label>
</section>
<section>
<input id="radio2" name="radioset" type="radio" value="Choice_2" />
<label for="radio2">Choice 2</label>
</section>
<section>
<input id="radio3" name="radioset" type="radio" value="Choice_3" />
<label for="radio3">Choice 3</label>
</section>
</section>

<section>
<label for="select_choice">Select Your Choice</label>
<select id="select_choice" name="select_choice">
<option value="0">None</option>
<option value="1">Choice 1</option>
<option value="2">Choice 2</option>
<option value="3">Choice 3</option>
<option value="4">Choice 4</option>
</select>
</section>
</fieldset>

<section>
<input type="submit" value="Submit This Form" />
</section>
</form>
</body>
</html>