在本教程中，我们将学习使用CSS设置表单样式。

输入框

在下面的示例中，我们有一个输入文本字段。

如果我们想将样式规则应用于所有输入字段，则可以使用以下样式规则。

input {
	width : 100px;
}

我们还可以使用属性选择器将规则应用于指定输入类型。

在下面的示例中，我们将样式规则仅应用于输入类型的文本。

input[type=text] {
	width : 100px;
}

同样，我们可以使用其他属性选择器，如下所示。

• input[type=password]
• input[type=number]
• input[type=date]
• input[type=email]

样式宽度-输入文字

我们使用width属性改变输入文本字段的宽度。

在下面的示例中，我们将宽度设置为100％

input[type=text] {
	width : 100%;
}

样式填充-输入文字

我们使用padding属性更改输入文本字段的填充。

在下面的示例中，我们将填充设置为15px(上下)和10px(左右)。

input[type=text] {
	padding : 15px 10px;
	width : 100%;
}

边框样式-输入文字

我们使用border属性更改输入文本字段的边框。

在以下示例中，我们将边框设置为1px solid#333。

input[type=text] {
	border : 1px solid #333;
	padding : 15px 10px;
	width : 100%;
}

样式边框半径-输入文字

我们使用" border-radius"属性更改输入文本字段的边界半径。

在以下示例中，我们将border-radius设置为10px。

input[type=text] {
	border-radius : 10px;
	border : 1px solid #333;
	padding : 15px 10px;
	width : 100%;
}

样式文字颜色-输入文字

我们使用color属性更改输入文本字段的文本颜色。

在以下示例中，我们将文本颜色设置为红色。

input[type=text] {
	color : red;
	border : 1px solid #333;
	padding : 15px 10px;
	width : 100%;
}

设置背景颜色样式-输入文本

我们使用background-color属性更改输入文本字段的背景色。

在下面的示例中，我们将背景色设置为浅黄色。

input[type=text] {
	background-color : lightyellow;
	border : 1px solid #333;
	padding : 15px 10px;
	width : 100%;
}

焦点时的样式-输入文字

仅当输入文本为焦点时，我们才可以使用：focus选择器来应用某些样式规则。

在下面的示例中，仅当字段处于焦点位置时才应用样式规则。

input[type=text] {
	border : 1px solid #333;
	padding : 15px 10px;
	width : 100%;
}

input[type=text]:focus {
	background-color : lightyellow;
	border : 1px solid yellow;
}

样式大纲-输入文字

默认情况下，浏览器在焦点对准时会在输入字段中添加蓝色轮廓。
为了消除这种默认行为，我们将outline属性设置为none。

在以下示例中，当输入字段处于焦点位置时，蓝色轮廓不会出现。

input[type=text] {
	outline : none;
	border : 1px solid #333;
	padding : 15px 10px;
	width : 100%;
}

在下面的示例中，当输入字段为焦点时，轮廓样式将为2px纯红色。

input[type=text] {
	border : 1px solid #333;
	padding : 15px 10px;
	width : 100%;
}

input[type=text]:focus {
	outline : 2px solid red;
}

样式化textarea

我们使用以下常用的样式属性对文本区域进行样式设置。

• color改变文本的颜色
• background-color改变背景色
• font-size改变字体大小
• border改变边界
• border-radius改变边界半径
• 当获取焦点时，可以使用"outline"更改文本区域的轮廓
• resize以防止文本区域被调整大小
• padding设置填充
• width改变文本区域的宽度
• height改变文本区域的高度

在下面的示例中，我们对具有类mytextarea的textarea进行了样式设置。

textarea.mytextarea {
	color : #333;
	background-color : lightyellow;
	font-size : 16px;
	border : 1px solid #d1d1d1;
	resize : none;
	padding : 15px;
	width : 80%;
	height : 200px;
}

/**
 * this will be applied when the textarea having class .mytextarea will
 * be in focus.
 */
textarea.mytextarea:focus {
	outline : 2px solid cyan;
}

样式选择菜单

我们使用以下常用的样式属性来对选择进行样式设置。

• color改变文本的颜色
• background-color改变背景色
• font-size改变字体大小
• border改变边界
• outline可以在选中焦点时更改其轮廓
• padding设置填充
• width改变选择的宽度

在下面的示例中，我们对选择应用了一些样式。

select {
	color : #999;
	background-color : lightyellow;
	font-size : 20px;
	border : 1px solid #333;
	outline : none;
	padding : 15px;
	width : 80%;
}

---选择---苹果芒果橙

样式输入按钮

要设置表单输入按钮的样式，我们可以使用以下常用的style属性。

• color改变文本的颜色
• background-color改变背景色
• font-size改变字体大小
• border改变边界
• padding设置填充
• margin设置边距
• width改变按钮的宽度
• height改变按钮的高度
• 当按钮对准焦点时，使用"轮廓"更改轮廓

在下面的示例中，我们为button编写了一些样式规则。

/**
 * apply this rule to all input type button
 */
input[type=button] {
	font-size : 16px;
	border : none;
	padding : 15px;
	margin : 20px 0;
	width : 100%;
	display : block;
	outline : none;
}

/**
 * apply this rule if the button has class .btn-success
 */
input[type=button].btn-success {
	color : #fff;
	background-color : #00d200;
}

/**
 * apply this rule if the button has class .btn-failure
 */
input[type=button].btn-failure {
	color : #fff;
	background-color : #fa8072;
}

/**
 * apply this rule if the button has class .btn-info
 */
input[type=button].btn-info {
	color : #fff;
	background-color : #87cefa;
}

设置"重置并提交"按钮的样式

要为诸如"重置"和"提交"之类的表单按钮设置样式，我们可以使用以下常用的样式属性。

• color改变文本的颜色
• background-color改变背景色
• font-size改变字体大小
• border改变边界
• padding设置填充
• margin设置边距
• width改变按钮的宽度
• height改变按钮的高度
• 当按钮对准焦点时，使用"轮廓"更改轮廓

在以下示例中，我们为提交按钮编写了一些样式规则。

input[type=submit] {
	color : white;
	background-color : green;
	font-size : 16px;
	border : none;
	padding : 15px;
	margin : 20px 0;
	width : 100%;
	outline : none;
}

在下面的示例中，我们为"重置"按钮编写了一些样式规则。

input[type=reset] {
	color : #333;
	background-color : #d3d3d3;
	font-size : 16px;
	border : none;
	padding : 15px;
	margin : 20px 0;
	outline : none;
	height : 100px;
}