CSS 形式

使用 CSS 可以大大改善 HTML 表单的外观：

输入字段样式

使用 width 属性来确定输入字段的宽度：

上面的例子适用于所有<input>元素。如果您只想设置特定输入类型的样式，则可以使用属性选择器：

• input[type=text] - 仅选择文本字段
• input[type=password] - 仅选择密码字段
• input[type=number] - 仅选择数字字段
• ETC..

填充输入

使用 padding 属性在文本字段内添加空间。

提示： 当你有很多输入时，你可能还需要添加一些margin，在它们之外添加更多空间：

边界输入

使用 border 属性来改变边框大小和颜色，并使用border-radius 属性添加圆角：

如果你只想要底部边框，使用 border-bottom 财产：

彩色输入

使用 background-color 属性为输入添加背景颜色，以及color 属性来改变文本颜色：

重点输入

默认情况下，某些浏览器会在输入获得焦点（点击）时在其周围添加蓝色轮廓。您可以通过添加 outline: none; 到输入。

使用 :focus 当选择器获得焦点时对输入字段执行某些操作：

带图标/图像的输入

如果你想要在输入框内显示图标，可以使用 background-image 属性并将其定位到background-position 属性。还请注意，我们添加了较大的左填充以保留图标的空间：

动画搜索输入

在此示例中，我们使用 CSS transition 属性，用于在获得焦点时对搜索输入的宽度进行动画处理。您将详细了解transition 财产以后，在我们的CSS 过渡 章节。

样式化文本区域

提示： 使用resize 属性以防止文本区域被调整大小（禁用右下角的“抓取器”）：

选择菜单样式

输入按钮样式

有关如何使用 CSS 设置按钮样式的更多信息，请阅读我们的 CSS 按钮教程.

响应式表单

调整浏览器窗口大小来查看效果。当屏幕宽度小于 600px 时，让两列堆叠在一起，而不是彼此相邻。