This screencast is a part of our AtoZ CSS Series. You can find other entries to the series .

该截屏视频是我们的AtoZ CSS系列的一部分。 您可以在找到该系列的其他条目。

成绩单 (Transcript)

I’ve got two sets of inputs and buttons here.

我在这里有两组输入和按钮。

They are both in their default state of enabled which we can demonstrate by styling them with the :enabled pseudo-class, giving them a dark gray background and a blue text color.

它们都处于默认的启用状态，我们可以通过使用:enabled伪类对它们进行样式设置来演示它们，为它们提供深灰色背景和蓝色文本颜色。

If I now add the disabled attribute to the HTML of the first set of inputs, the user agent styles for disabled fields takes over and our :enabled styles do not as the inputs are no longer enabled. We can control the styling of disabled inputs in CSS with the :disabled pseudo-class.

如果现在将disabled属性添加到第一组输入HTML中，则禁用字段的用户代理样式将接管，而我们的:enabled样式将不起作用，因为不再启用​​输入。 我们可以使用:disabled伪类来控制CSS中禁用输入的样式。

用例 (Use case)

Let’s take a look at a real-world use case.

让我们看一下实际的用例。

Here we have the payment step for ordering some food online. In this stage of the form, the payment method is requested, and the choice is either cash or card.

在这里，我们有付款步骤，可以在线订购一些食物。 在表单的此阶段，要求付款方式，选择是现金还是卡。

If we want to pay by card, the fields for the card holder, card number, start date, expiry date and security code are enabled. If we want to pay with cash, these details aren’t needed, and we can disable them. This can’t be done with CSS alone, but we can use a bit of JavaScript or jQuery to handle the interaction.

如果我们想通过卡付款，则启用卡持有人，卡号，开始日期，有效期和安全码的字段。 如果我们想用现金付款，则不需要这些详细信息，我们可以将其禁用。 仅靠CSS不能做到这一点，但是我们可以使用一些JavaScript或jQuery处理交互。

When we change the payment method, the script checks whether the radio button with the ID of cash is :checked. This is another pseudo-class that determines state – in this case, the checked or unchecked state of a checkbox or radio button. If cash is checked, we add the disabled attribute to all the inputs and select menus in the card fields container. We also add an is-disabled class to the labels which will allow these to be given different styles too.

当我们更改付款方式时，脚本将检查ID为Cash的单选按钮是否为:checked 。 这是另一个伪类，它确定状态–在这种情况下，是复选框或单选按钮的选中或未选中状态。 如果选中了现金，则将disabled属性添加到所有输入，并在卡字段容器中选择菜单。 我们还向标签添加了一个is-disabled类，这将使它们也可以使用不同的样式。

We can then style these in CSS, making the color of the text and the background of the inputs a light gray to show that they’re no longer enabled.

然后，我们可以在CSS中设置样式，使文本的颜色和输入的背景变为浅灰色，以表明不再启用它们。

Watch out for our Quick Tip article coming soon!

请留意即将发布的“快速提示”文章！

翻译自: