CSS表单样式
我们可以使用CSS设置HTML表单的样式。通过这种方式，我的意思是我们可以为各个表单字段设置样式。 HTMLform元素更像是一个语义元素，因此对其进行样式设置没有任何意义。
我的另外两本关于HTML 4表单域和HTML 5表单域的教程介绍了HTML表单。
样式输入元素
要设置样式的最常见表单字段是input元素。实际上，由于"输入"元素可用于创建几种不同类型的输入字段，因此通常不会对所有"输入"元素进行均等的样式设置。相反，我们将为各种不同的输入字段设置不同的样式。例如：
input[type='text'] {
border : 1px solid #cccccc;
}
input[type='submit'] {
border : 1px solid #00ff00;
}
本示例在文本输入字段周围设置了灰色边框，在提交按钮周围设置了绿色边框。
以下各节将更详细地说明如何设置各种表单字段的样式。
文字栏位
文本字段是具有"类型"属性设置为"文本"的"输入"元素。 HTML的外观如下：
<input type="text">
这是在浏览器中呈现文本字段时的外观(并非所有浏览器都呈现相同的文本字段)：
文字栏位CSS选择器
要设置所有文本字段的样式(<input type =" text">)，我们需要结合使用元素选择器和属性CSS选择器。这是一个例子：
input[type='text'] {
/* set CSS properties here*/
}
文字栏位边框
可以设置文本字段的边框样式。本示例在所有文本字段周围设置灰色边框：
input[type='text'] {
border : 1px solid #cccccc;
}
这是应用于文本字段时的外观：
有关边框样式的更多信息，请参阅我的CSS边框教程。
文字栏位背景颜色
我们还可以设置文本字段的背景颜色。这是设置文本字段的边框和背景颜色的示例：
input[type='text'] {
border : 1px solid #cccccc;
background-color : #e0e0e0;
}
这是样式化的文本字段的外观：
文字栏的宽度和高度
我们还可以使用CSS的width和height属性设置文本字段的宽度和高度。以下是一些示例：
input[type='text'] {
width: 50px;
height: 10px;
}
input[type='text'] {
width: 100px;
height: 15px;
}
input[type='text'] {
width: 150px;
height: 20px;
}
这是应用了这些宽度和高度的文本字段的外观：
文字栏位字型
可以设置文本字段使用的字体系列和字体大小。这是一个例子：
input[type='text'] {
font-family: Times;
font-size : 24px;
}
这些样式应用于文本字段时的外观如下：
有关字体CSS属性的更多信息，请查看我的有关使用CSS设置文本样式的教程。
文字区
我们可以使用与文本字段几乎相同的方式来设置textarea HTML元素的样式。我们可以像这样设置边框，背景色，宽度和高度的样式：
textarea {
border: 1px solid #cccccc;
background-color: #eeeeee;
width : 400px;
height : 200px;
}
这是应用了这些样式的textarea的外观：
A textarea with some text inside.
调整大小：无
默认情况下，浏览器允许用户拖动" textarea"的右下角来调整文本区域的大小。要删除此调整大小句柄，可以将resizeCSS属性设置为`none'，如下所示：
textarea {
border: 1px solid #cccccc;
background-color: #eeeeee;
width : 400px;
height : 100px;
resize : none;
}
这是应用了这些样式的textarea的外观：
A textarea with some text inside.
纽扣
我们也可以设置表单中使用的按钮的样式。按钮是"输入"元素，其"类型"设置为"按钮"或者"提交"，或者"按钮"元素。以下是一些按钮的HTML外观示例：
<input type="button" value="A Button"> <input type="submit" value="A Submit Button"> <button>A Button</button>
按钮CSS选择器
我们可以使用以下三个CSS选择器设置这三个按钮元素的样式：
input[type='button'] { }
input[type='submit'] { }
button { }
按钮样式
我们可以在按钮上设置边框，背景颜色，字体等。这是一个例子：
button {
font-family : Helvetica;
font-size : 24px;
color : #ffffff;
background-color : #009900;
border : 3px solid #006600;
padding : 10px;
}
将这些样式应用于按钮时，它们的外观如下：
一个按钮
按钮悬停样式
我们也可以为鼠标悬停在按钮上时设置样式。这是一个例子：
#theButton {
font-family : Helvetica;
font-size : 24px;
color : #ffffff;
background-color : #009900;
border : 3px solid #006600;
padding : 5px;
}
#theButton:hover {
background-color : #00cc00;
border : 3px solid #009900;
}
这是将样式应用于" button"元素时的外观：
按钮
请注意，将鼠标悬停在按钮上方时背景颜色和边框颜色如何变化。
标签
我们还可以设置标签元素的样式，该元素通常包含给定输入字段的标签。设置标签元素样式的一种常用方法是给它们全部相同的宽度。这样，标签和字段可以很好地显示在两列的布局中。这是一个代码示例：
<style>
label {
display: inline-block;
width : 200px;
}
</style>
<label>Name</label> <input type="text"> <br>
<label>Address</label> <input type="text">
这是应用了这些样式的这两个输入字段的外观：
姓名地址
注意标签和文本字段如何在彼此上方很好地对齐。发生这种情况是因为label元素具有相同的宽度。
字段集和图例
" fieldset"和" legend" HTML元素用于在表单周围绘制一个框，并在框的顶部(边框内)写入图例。这是一个代码示例：
<fieldset>
<legend>Input Form</legend>
<label style="display: inline-block; width: 150px;">First name</label>
<input type="text"><br/>
<label style="display: inline-block; width: 150px;">Last name</label>
<input type="text"><br/>
</fieldset>
这是呈现代码时的外观：
输入表格名姓
我们可以设置" fieldset"元素的边框颜色，背景颜色等，就像它是文本字段一样。我们还可以设置" legend"元素的字体，就好像它是文本元素一样。
