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属性。另请注意，我们添加了一个大的左侧填充来保留图标的空间：

动画搜索输入

在这个例子中我们使用CSStransition属性来在获得焦点时对搜索输入的宽度进行动画处理。您将了解更多关于 transition稍后属性，在我们的CSS 过渡章节。

设置文本区域的样式

提示：使用resize属性以防止调整文本区域的大小（禁用右下角的"grabber"）：

设置选择菜单的样式

设置输入按钮的样式

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

响应式表格

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