CSS 表单
使用 CSS 可以极大地改善 HTML 表单的外观。
样式化输入字段
使用 width 属性来确定输入字段的宽度。
上面的示例适用于所有 <input> 元素。如果你只想样式化特定类型的输入，可以使用属性选择器。
input[type=text]- 仅选择文本字段。input[type=password]- 仅选择密码字段。input[type=number]- 仅选择数字字段。- 等等。
带填充的输入
使用 padding 属性在文本字段内添加空间。
提示： 如果你有很多输入字段排列在一起，你可能也需要添加一些 margin，以便在它们外部添加更多空间。
示例
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
自己尝试 »
请注意，我们已经将 box-sizing 属性设置为 border-box。这确保了填充和最终的边框都包含在元素的总宽度和高度中。
在我们的 CSS 盒尺寸 章中了解更多关于 box-sizing 属性的信息。
带边框的输入
使用 border 属性来更改边框大小和颜色，并使用 border-radius 属性来添加圆角。
如果你只想要底部边框，请使用 border-bottom 属性。
彩色输入
使用 background-color 属性为输入添加背景颜色，使用 color 属性更改文本颜色。
获得焦点的输入
默认情况下，一些浏览器会在输入获得焦点（点击）时在输入周围添加蓝色轮廓。你可以通过向输入添加 outline: none; 来移除这种行为。
使用 :focus 选择器来在输入字段获得焦点时对它做一些事情。
带有图标/图像的输入
如果你想要在输入字段内添加一个图标，请使用 background-image 属性，并使用 background-position 属性来定位它。还要注意，我们添加了一个大的左填充来保留图标的空间。
示例
input[type=text] {
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding-left: 40px;
}
自己尝试 »
动画搜索输入
在这个示例中，我们使用 CSS transition 属性来在搜索输入获得焦点时为其宽度添加动画。你将在我们之后的 CSS 过渡 章中学习更多关于 transition 属性的信息。
示例
input[type=text] {
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}
自己尝试 »
样式化文本区域
提示：使用 resize 属性可以防止文本区域被调整大小（禁用右下角的“抓手”）。
示例
textarea {
width: 100%;
height: 150px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
resize: none;
}
自己尝试 »
样式选择菜单
示例
select {
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
}
自己尝试 »
样式输入按钮
示例
input[type=button], input[type=submit], input[type=reset] {
background-color: #04AA6D;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
/* 提示：使用 width: 100% 创建全宽按钮 */
自己尝试 »
有关如何使用 CSS 样式化按钮的更多信息，请阅读我们的 CSS 按钮教程。
响应式表单
调整浏览器窗口大小以查看效果。当屏幕宽度小于 600px 时，使两列堆叠在彼此之上，而不是并排放置。
高级：以下示例使用 媒体查询 创建响应式表单。您将在后面的章节中了解有关此内容的更多信息。
