字段校验 css样式

The following is an extract from our book, CSS Master, written by Tiffany B. Brown. Copies are sold in stores worldwide, or you can buy it in ebook form here.

以下是Tiffany B. Brown所著《 CSS Master》一书的摘录。 副本在世界各地的商店中都有出售，或者您可以在此处以电子书形式购买 。

Let’s take a look at some pseudo-classes that are specific to form fields and form field input. These pseudo-classes can be used to style fields based on the validity of user input, whether the field is required or currently enabled.

让我们看一下一些特定于表单字段和表单字段输入的伪类。 这些伪类可用于基于用户输入的有效性来为字段设置样式，无论该字段是必需字段还是当前启用的字段。

All of the pseudo-classes that follow are specific to forms. As a result, there’s less of a need to limit the scope with a selector. Using :enabled won’t introduce side effects for span elements. Limiting the scope is helpful, however, when you want to syle various types of form controls differently.

随后的所有伪类都是特定于表单的。 结果，很少需要使用选择器来限制范围。 使用:enabled不会对span元素产生副作用。 但是，如果希望以不同的方式设置各种类型的表单控件，则限制范围是有帮助的。

:enabled和:disabled (:enabled and :disabled)

As their name suggests, these pseudo-classes match elements that have (or lack) the disabled HTML5 attribute. This can be an input control such as input, select, or button element (seen shortly), or it can be a fieldset element:

顾名思义，这些伪类将匹配具有(或缺少) disabled HTML5属性的元素。 这可以是输入控件，例如input ， select或button元素(很快就会看到)，也可以是fieldset元素：

<button type="submit" disabled>Save draft</button>

Form elements are enabled by default; that is, they only become disabled if the disabled attribute is set. Using input:enabled will match every input element that is without a disabled attribute set. Conversely, button:disabled would match all button elements with a disabled attribute:

表单元素默认为启用； 也就是说，只有设置了disabled属性，它们才会被禁用。 使用input:enabled将匹配未设置disabled属性的每个input元素。 相反， button:disabled将匹配所有具有disabled属性的按钮元素：

button:disabled {
opacity: .5;
}

The figure shows the :enabled and :disabled states for our button element.

该图显示了button元素的:enabled和:disabled状态。

:required和:optional (:required and :optional)

Required and optional states are determined by the presence or absence of the required attribute on the field.^[6] For example:

必需和可选状态由字段上是否存在required属性确定。 ^[6]例如：

<p>
<label for="email">E-mail:</label>
<input type="email" id="email" name="email" placeholder="example: jane.doe@example.com" required>
</p>

Most browsers only indicate whether a field is required once the form is submitted. With the :required pseudo-class, we can indicate to the user that the field is required before submission. For example, the following CSS will add a yellow border to our email field from above, and is shown in the figure below:

大多数浏览器仅在提交表单后指示是否需要字段。 使用:required伪类，我们可以向用户指示在提交之前必须填写该字段。 例如，以下CSS将从上方将黄色边框添加到我们的电子邮件字段中，如下图所示：

input:required {
border: 1px solid #ffc107;
}

The :optional class works similarly, by matching elements that do not have a required attribute. For example, the CSS that follows gives us the results seen below.

:optional类通过匹配不具有required属性的元素来类似:optional工作。 例如，以下CSS为我们提供了如下所示的结果。

select:optional {
border: 1px solid #ccc;
}

:checked (:checked)

Unlike the other pseudo-classes that we’ve covered, :checked only applies to radio and checkbox form controls. As the name indicates, this pseudo-class lets us define separate styles for selected inputs.

与我们介绍的其他伪类不同， :checked仅适用于单选和复选框表单控件。 顾名思义，该伪类使我们可以为所选输入定义单独的样式。

Unfortunately, styling radio controls and checkboxes in most browsers is about as pleasant as a trip to the dentist for a filling. CSS Basic User Interface Module Level 4 attempts to address this with the appearance property, but this property is not yet supported. WebKit/Blink-based browsers and Firefox do, however, support nonstandard, vendor-prefixed versions of it.

不幸的是，在大多数浏览器中设置无线电控件和复选框的样式与牙医去填牙一样愉快。 CSS Basic用户界面模块4级尝试使用外观属性解决此问题，但尚不支持此属性。 但是，基于WebKit / Blink的浏览器和Firefox都支持非标准的，供应商前缀的版本。

In order to create custom radio button and checkbox inputs that work well across browsers, we need to become clever with our selectors. We’ll use a sibling combinator, a pseudo-element, and :checked to create custom radio button and checkbox controls. For example, to change the style of a label when its associated radio button is checked, we could use the following CSS:

为了创建自定义单选按钮和复选框输入，使其在所有浏览器上都能正常工作，我们需要对选择器变得更聪明。 我们将使用同级组合器，伪元素和:checked创建自定义单选按钮和复选框控件。 例如，要在选中标签的相关单选按钮时更改标签的样式，我们可以使用以下CSS：

[type=radio]:checked + label {
font-weight: bold;
font-size: 1.1rem;
}

This makes the label bold and increases its size when its associated control is checked. We can improve this, though, by using the ::before pseudo-element with our label element to inject a custom control:

这将使标签变为粗体，并在检查与其关联的控件时增加其大小。 不过，我们可以通过将::before伪元素与我们的label元素一起使用以注入自定义控件来改善此问题：

[type=radio] { opacity: 0; }
[type=radio] + label::before {
background: #fff;
content: '';
display: inline-block;
border: 1px solid #444;
height: 1.2rem;
margin-right: 1em;
vertical-align: middle;
width: 1.2rem;
}
[type=radio]:checked + label::before {
background: #4caf50;
}

This gives us the customized controls you see below.

这为我们提供了您在下面看到的自定义控件。

In order for this technique to work, of course, our HTML needs to be structured appropriately:

为了使该技术起作用，我们HTML需要适当地构建：

Associating the label using for with the input ensures that the form input will be selected when the user clicks or taps the label or its child pseudo-element (::before).

将for使用标签与输入相关联，以确保当用户单击或点击标签或其子伪元素( ::before )时，将选择表单输入。

:in-range和:out-of-range (:in-range and :out-of-range)

The :in-range and :out-of-range pseudo-classes can be used with range, number, and date input controls. Using :in-range and :out-of-range requires setting min and/or max attribute values for the control. Here’s an example using the number input type:

:in-range和:out-of-range伪类可与range ， number和date输入控件一起使用。 使用:in-range和:out-of-range要求设置控件的min和/或max属性值。 这是使用number输入类型的示例：

<p>
<label for="picknum">Enter a number from 1-100</label>
<input type="number" min="1" max="100" id="picknum" name="picknum" step="1">
</p>

Let’s add a little bit of CSS to change styles if the values are within or outside of our range of one to 100:

如果值在1到100的范围内或之外，让我们添加一点CSS来更改样式：

:out-of-range {
background: #ffeb3b;
}
:in-range {
background: #fff;
}

Should the user enter -3 or 101, the background color of #picknum will change to yellow as defined in our :out-of-range rule set (see the figure below). Otherwise, it will remain white as defined in our :in-range rule set.

如果用户输入-3或101，则#picknum的背景颜色将变为我们的:out-of-range规则集中定义的黄色(请参见下图)。 否则，它将按照我们的:in-range规则集中的定义保持白色。

:valid和:invalid (:valid and :invalid)

With the :valid and :invalid pseudo-classes, we can set styles based on whether or not the form input meets our requirements. This will depend on the validation constraints imposed by the type or pattern attribute value. For example, an input with type="email" will be invalid if the user input is “foo 123,” as represented in teh figure below.

使用:valid和:invalid伪类，我们可以根据表单输入是否满足我们的要求来设置样式。 这将取决于type或pattern属性值施加的验证约束。 例如，如果用户输入为“ foo 123”，则type="email"的输入将无效，如下图所示。

A form control will have an invalid state under the following conditions:

在以下情况下，表单控件将具有无效状态：

Optional fields with empty values are valid by default. Obviously, if user input satisfies the constraints of the field, it exists in a valid state.

默认情况下，具有空值的可选字段有效。 显然，如果用户输入满足该字段的约束，则它以有效状态存在。

Form controls can have multiple states at once. So you may find yourself managing specificity (discussed in the next section) and cascade conflicts. A way to mitigate this is by limiting which pseudo-classes you use in your projects. For example, don’t bother defining an :optional rule set if you’ll also define a :valid rule set.

表单控件可以一次具有多个状态。 因此，您可能会发现自己正在管理特异性(在下一节中讨论)和级联冲突。 减轻这种情况的一种方法是限制您在项目中使用的伪类。 例如，如果您还要定义:valid规则集，则不必费心定义:optional规则集。

It’s also possible, however, to chain pseudo-classes. For example, we can mix the :focus and :invalid pseudo-classes to style an element only while it has focus: input:focus:invalid. By chaining pseudo-classes, we can style an element that has more than one state.

但是，也可以链接伪类。 例如，我们可以混合:focus和:invalid伪类来仅在元素具有焦点时对其样式进行设置： input:focus:invalid 。 通过链接伪类，我们可以设置具有多个状态的元素的样式。

翻译自: https://www.sitepoint.com/css-pseudo-classes-styling-form-fields-based-on-their-input/

字段校验 css样式