样式化 HTML 表单

现在我们可以深入探究本例的 CSS 了。将下面所有的代码块一个接一个地加到 元素里。

首先，我们要准备一些基础。这需要定义 @font-face 规则，以及所有的 元素和 元素基本规则：

现在我们可以定位我们的元素，包括标题和其他表单元素：

现在我们开始处理表单元素本身。首先，让我们确保 被赋予了正确的字体：

文本域需要一些通用的规则，我们只需简单的移除 borders 和 backgrounds, 并重新定义其padding 和 margin：

当其中的一个域获得焦点后，我们用浅灰色、半透明的背景高亮它们，注意添加outline 属性非常重要，这样可以移除由某些浏览器添加的默认高亮效果：

现在我们的文本域已经完成了，我们需要调整单行和多行文本域的显示，使其能够匹配，因为通常情况下它们不会以默认的设置而具有一样的外观。

单行文本需要一些调整才能在 Internet Explorer 中渲染良好。Internet Explorer 没有基于字体的自然高度来定义文本域的高度（而这是所有其他浏览器都有的行为）。为了修正这个问题，我们需要给域添加一个确定的高度，像下面这样：

元素默认地被渲染成一个块级元素。这里有重要地两点是 resize 和 overflow 属性。因为我们的设计是一个固定大小的设计，所以我们会使用 resize 属性来防止用户调整我们的多行文本域的大小。overflow 属性是用来让域在不同的浏览器上渲染得更一致。一些浏览器默认值为 auto，而一些将默认值设为 scroll。在我们得例子中，最好确定每个浏览器都使用 auto：

元素上使用 CSS 非常方便；你可以做你任何想做得事情，甚至包括使用 伪元素：

瞧！

备注： 如果你的例子没有像你预期的那样工作，你想将它同我们的版本检查对比，你可以在 Github 上找到它——查看在线演示（也可以查看源代码）。