CSS 表单

通过使用 CSS，可以极大地改善 HTML 表单的外观:

设置输入字段的样式

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

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

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

填充输入框

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

提示: 若有很多输入，那么您可能还需要添加外边距，以便在它们之外添加更多空间:

带边框的输入框

请使用 border 属性更改边框的粗细和颜色，并使用 border-radius 属性添加圆角:

如果仅需要下边框，请使用 border-bottom 属性:

彩色的输入框

请使用 background-color 属性为输入添加背景色，并使用 color 属性更改文本颜色:

获得焦点的输入框

默认情况下，某些浏览器在获得焦点（单击）时会在输入框周围添加蓝色轮廓。您可以通过向输入添加 outline: none; 来消除此行为。

使用 :focus 选择器可以在输入字段获得焦点时为其设置样式:

带有图标/图像的输入框

如果希望在输入框中包含图标，请使用 background-image 属性，并将其与 background-position 属性一起设置。还要注意，我们添加了一个较大的左内边距（padding-left）来留出图标的空间:

带动画效果的搜索输入框

在本例中，我们使用 CSS transition 属性为搜索输入框获得焦点时的宽度变化设置动画。稍后，您将在我们的 CSS 过渡 一章中学到更多有关 transition 属性的知识。

设置文本域的样式

提示: 使用 resize 属性可防止对 textareas 调整大小（禁用右下角的"抓取器"）:

设置选择菜单的样式

设置输入按钮的样式

有关如何使用 CSS 设置按钮样式的更多知识，请学习我们的 CSS 按钮 教程。

响应式菜单

请调整 TIY 编辑器窗口的大小来查看效果。当屏幕的宽度小于 600 像素时，使两列上下堆叠而不是左右堆叠。