Question

现在我们的表单实现了跨浏览器一致的功能表现，同时也有一些基本样式。你我都知道，使用CSS3可以让表单的样式更美观。我们应用一些之前已经学习过的技巧，来使表单更加活色生香。目前我们的表单样式如下：

唯一需要注意的地方是最后两个样式只在相应的补丁脚本运行时发挥作用。

首先，我想让每个fieldset都有一个好看的渐变背景，相互之间稍微空开一点。下面是针对fieldset修改后的CSS代码：

除了圆角和背景渐变效果，我们唯一需要做的就是再加一点点阴影（box-shadow）效果。和前面的很多例子一样，我在此处省略了各种CSS3声明的浏览器私有前缀（本例中有linear-gradient、border-radius和box-shadow）。

修改之后在Chrome中的效果如下图所示：

混用各种颜色值

在整个示例代码中，你可以看到我混用了各种颜色值。有时是red这样的颜色名称，有时是十六进制、RBG或HSL。在支持这些颜色模式的浏览器中这样做没什么问题。但在实际生产环境中，为保持一致性和兼容性，你应该只选用一两种颜色模式。

目前看起来效果还不错，但那些文本输入框依然有点枯燥。我们用下面的CSS3代码来为其润色一下：

这里又一次使用了背景渐变，加了圆角，还有一点恰到好处的阴影。现在Chrome中的效果如下图：

这个效果我很满意……噢，等等。看看最下面的滑动条，这可不是我想要的效果。我不想让刚才的那些规则影响滑动条，所以我使用了一个CSS3选择器的新特性来选出我想要的元素：

我使用：not这个否定选择器来排除type＝"range"类型的输入元素，再来看看Chrome中的效果：

太帅了！这就是我想要的效果，CSS3不仅能轻松地追加样式，而且也能有效阻止在不需要的元素上追加样式。

针对表单的CSS3伪类选择器

除了前面已经了解的那些有趣的CSS3工具之外，CSS3还提供了一些专门针对表单的伪类选择器。

input：required：选择必填表单域；

input：focus：invalid：选择当前聚焦的且含有非法输入值的表单域；

input：focus：valid：选择当前聚焦的且含有合法输入值的表单域。

我们使用上面的伪类选择器再编写三条新规则：

第一个规则给必填表单域加了一点红色边框。当用户输入时，如果所输入的值不符合规定格式，则第二个样式会给当前的输入框加上一个红色叉号；如果输入值符合格式，则第三个样式会给其加上一个绿色对号。

下面的截图显示了浏览器（Firefox v9）加载完页面的效果：

如果我们聚焦（点击）到一个必填输入框，右侧就会出现一个红色叉号（因为我们还没输入有效的值）：

如果我们输入一个有效的值，红色的叉号就变成了绿色的对号：

使用这些新的CSS3伪类选择器可以制作出优美的、易于实现的增强效果，可以大大提升用户填写表单的用户体验。