HTML5表单：CSS

在这个由三部分组成的有关HTML5表单的系列的第二篇文章中，我们将研究样式或（更具体地说）可用于定位各种状态下的输入字段的伪类选择器。 如果您还没有阅读过，请参考第一部分以确保您了解基本的标记概念。

删除默认样式

您可能已经注意到浏览器采用默认格式。 例如，大多数浏览器将圆角应用于search框，并添加细微的背景渐变，这些渐变在您的平面设计上可能放错了位置。

要删除默认样式，可以使用如下appearance: none; 属性，需要前缀。 但是，请谨慎使用，因为它可以删除基本样式-复选框和单选按钮在Chrome中消失了！ 为了安全起见，仅在需要时才应用该属性，并在尽可能多的浏览器中进行测试，例如

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  appearance: none;
  outline: 0;
  box-shadow: none;
}

注意我还重置了outline和box-shadow以在所有浏览器中删除默认的难看的蓝色框阴影焦点和错误样式。

外观属性记录在CSS-Tricks上，但处于不断变化的状态。

：焦点

:focus自CSS2.1开始就受到支持，并为当前使用的字段设置样式，例如

input:focus,
textarea:focus,
select:focus {
  background-color: #eef;
}

：已检查

:checked样式将应用于选中的复选框或单选按钮，例如

<input type="checkbox" name="test" />
<label for="test">check me</label>

input:checked ~ label {
    font-weight: bold;
}

没有对应的'：unchecked'选择器，但您不需要一个选择器：只需创建默认样式，然后在激活:checked时应用更改。 另外，您可以使用:not(:checked) 。

：不定

:indeterminate从技术上讲尚不在规范中， 尽管已提及 。 根据规范，它表示“未选中或未选中”的复选框或单选按钮。

这是不寻常的，因为它仅在通过JavaScript设置复选框的.indeterminate属性时才应用样式，即

document.getElementById("mycheckbox").indeterminate = true;

它对.checked属性.checked ，只能为true或false。

:indeterminate很有用的情况很少。 如果您有一个列表复选框，则可以提供一个“全部选中”复选框，单击该复选框可以选中或取消选中每个项目。 但是，如果您选中某些项目，则“全部检查”复选框可能会变成不确定状态。

：需要

:required将样式应用于具有required属性且必须在提交之前输入的任何输入。

：可选的

:optional将样式应用于没有required属性的任何输入。 我不确定为什么要添加它，因为:not(:required)是否会这样做？

：有效

:valid将样式应用于当前包含有效数据的任何输入。

：无效

同样， :invalid （或:not(:valid) ）将样式应用于当前包含无效数据的任何输入，例如

input:invalid {
    border-color: #900;
}

：范围内（数字和范围输入）

可以使用:in-range选择保持符合step值的min和max属性之间的有效值的数字和范围。 显然，滑块超出范围有点困难，但是…

：超出范围（数量和范围输入）

:out-of-range指定范围输入的无效数字值。

：禁用

具有disabled属性的输入可以使用:disabled伪类作为目标，例如

input:disabled {
    color: #ccc;
    background-color: #eee;
}

请记住，禁用的字段将不会被验证或将其数据发布到服务器。 但是，伪类的样式，如:required和:invalid仍将应用。

：启用

同样，可以使用:enabled （或:not(:disabled) ）选择非禁用字段。 实际上，由于它是默认输入样式，因此您不太可能需要此选择器。

：只读

具有readonly属性的输入可以使用:read-only伪类作为目标。 请记住，只读输入仍将被验证并发布到服务器，但用户无法更改值。

：读写

可以使用:read-write （或:not(:read-only) ）选择标准的读写字段。 同样，它不是您经常需要的选择器。

：默认（仅提交按钮或输入）

最后，我们有:default选择器，它将样式应用于默认的Submit按钮。

占位符文字样式

可以使用带有供应商前缀（在单独的规则中）的::placeholder伪元素来设置placeholder属性文本的样式，例如

input::-webkit-input-placeholder { color: #ccc; }
input::-moz-placeholder { color: #ccc; }
input:-ms-input-placeholder { color: #ccc; }
input::placeholder { color: #ccc; }

CSS特异性

上面的选择器具有相同的特殊性，因此在定义适用于同一输入的两种或多种样式时需要格外小心。 考虑：

input:invalid { color: red; }
input:enabled { color: black; }

在这里，我们要求所有无效字段都使用红色文本，但是这永远不会发生，因为我们稍后在样式表中将所有启用的字段定义为具有黑色文本。

使选择器保持简单并使用最少的代码量。 例如，一个空的:required字段将是:invalid因此几乎没有必要设置前者的样式。

验证气泡

提交时，第一个无效值会以错误提示框突出显示：

气泡设计在不同的设备和浏览器上会有所不同。 仅Webkit / Blink浏览器允许一定程度的非标准CSS自定义：

::-webkit-validation-bubble { ... }
::-webkit-validation-bubble-arrow { ... }
::-webkit-validation-bubble-message { ... }
::-webkit-validation-bubble-arrow-clipper { ... }

我的建议：不要费力尝试。 如果您需要自定义错误格式，则几乎可以肯定要使用自定义消息。 为此，您将需要JavaScript。

浏览器支持

通常，重要的样式和选择器可在IE10 +的所有现代浏览器中使用。 一些不太有用的工具（例如in-range目前仅是Webkit / Blink。 较旧的浏览器将支持:focus但是，对于任何更复杂的浏览器，您都需要提供JavaScript后备功能。

创建可用表格

上面的样式将立即应用。 例如：

input:invalid {
    border-color: #900;
}

将红色边框应用于任何无效字段。 不幸的是，当页面第一次加载时，每个字段都可能是无效的，并且用户面临着一系列令人生畏的红色框。

就我个人而言，我更喜欢在提交时或在从无效字段更改焦点时出现错误。 浏览器无法提供本机操作。 您猜对了-您需要JavaScript。 幸运的是，HTML5约束验证API提供了以下工具：

• 暂停验证，直到使用表单为止
• 使用自定义错误消息
• polyfill不支持的输入类型
• 为旧版浏览器提供后备样式和验证，以及
• 创建更多可用的表格

我们将在本系列的最后一部分中仔细研究这些内容。

From: https://www.sitepoint.com/html5-forms-css/