填写 Divi 表单时如何为元素添加 CSS 焦点状态样式

大多数网站的主要目标之一是表单提交。 这是公司获得销售线索、电子邮件订阅者等的方式。 有效的网页设计可以使表单提交对访问者更具吸引力，而提高参与度的一种方法是在“填写”过程中为表单添加额外的样式。 为此，我们可以利用 CSS 中焦点状态的力量。 事实上，Divi 为 Divi 的表单模块（Contact、Email Optin 等）内置的表单字段提供了焦点样式选项，因此您不必依赖外部 CSS 来设置焦点状态下的这些表单字段的样式。

在本教程中，我们将介绍一种令人兴奋的方法，当访问者单击 Divi 表单上的字段时，可以更改多个元素的样式。 您不仅可以为特定的焦点字段添加 Divi 的内置焦点样式，还可以更改该字段周围元素的样式。 这将允许您通过微妙的动画和设计改进表单提交的 UI。

让我们开始吧！

抢先看

这是我们将在本教程中构建的设计的快速浏览。

免费下载布局

要亲身体验本教程中的设计，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

下载文件

免费下载

加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。

下载

您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！

要将部分布局导入您的 Divi 库，请导航到 Divi 库。

单击导入按钮。

在可移植性弹出窗口中，选择导入选项卡并从您的计算机中选择下载文件。

然后点击导入按钮。

完成后，分区布局将在 Divi Builder 中可用。

让我们进入教程，好吗？

你需要什么开始

首先，您需要执行以下操作：

1. 如果您还没有安装并激活 Divi 主题。
2. 在WordPress中新建一个页面，在前端使用Divi Builder编辑页面（visual builder）。
3. 选择“从头开始构建”选项。

之后，您将有一个空白画布开始在 Divi 中进行设计。

使用 :focus-within CSS 伪类

由于 Divi 已经具有用于在焦点状态下设置表单字段样式的内置选项，因此本教程还将将该焦点样式扩展到其他元素。 为了实现额外的焦点状态样式，我们将使用 Divi Builder 和一些使用:focus伪类的自定义 CSS 片段。

别担心，它并不像看起来那么复杂。

:focus 和 :focus-within 之间的区别

：重点

与:hover类似，CSS 中的:focus伪类用于在元素处于焦点状态时为其应用样式。 焦点状态通常通过单击表单上的输入字段等元素来触发。 例如，一旦用户在表单域内单击，它就会激活该域的焦点状态。 这允许您使用:focus伪类来定位 CSS 中该字段的样式。

:焦点内

:focus伪类目标（或代表）处于焦点状态的元素的样式。 然而， :focus-within伪类更进一步。 :focus-within伪类的目标是焦点元素的样式，以及包含焦点元素的任何元素。 这意味着您可以定位处于焦点的元素的任何父元素，并在该元素处于焦点时应用这些样式。 换句话说，我可以在表单域内部单击并更改表单域背景颜色（使用:focus ），同时使用更改表单域的父部分背景颜色（使用:focus-within ）。

填写 Divi 表单时向元素添加焦点状态样式

现在我们对:focus和:focus 的工作原理有了一定的了解，让我们通过在本教程中添加一些焦点状态样式来测试它。

添加预制布局

首先，添加 Travel Blog Contact 页面预制布局以启动本教程的设计，并准备好可用作我们示例的联系表单。 为此，请单击构建器设置菜单中的从库加载图标。 在预制布局选项卡下，单击旅游博客布局包，然后选择联系页面布局。 然后单击“使用此布局”按钮。

更新联系表单设置

在联系页面布局上，打开联系表单模块的设置并使用文本“Get in Touch”更新标题。

场焦点样式

在设计选项卡下，更新字段焦点样式如下：

• 字段焦点背景颜色：rgba(255,107,90,0.15)
• 字段焦点文本颜色：#000000

这将为实际字段的焦点状态设置样式（Divi Builder 设置中的一个方便的原生选项）。

联系表单 CSS 类

接下来，在高级选项卡下的联系表单中添加自定义 CSS，如下所示：

• CSS 类：divi-form-focus

这将是我们用来在表单字段聚焦时定位表单样式的类。

更新列设置

接下来，打开联系表单的父列的设置。

填充

• 填充：顶部 5%，底部 5%，左侧 3%，右侧 3%

列 CSS 类

在高级选项卡下，为该列提供以下 CSS 类：

• CSS 类：divi-column-focus

当表单字段（子元素）聚焦时，这将是我们用来定位列样式的类。

添加部分 CSS 类

为了在表单字段（也是该部分的子元素）聚焦时使用 CSS 来定位部分样式，请打开包含联系表单的部分的设置并添加以下 CSS 类：

• CSS 类：divi-section-focus

使用代码模块添加自定义 CSS

如前所述，当表单字段获得焦点时，我们将使用:focus CSS 伪类来设置其他 Divi 元素的样式。 我们将要设置样式的元素（表单、列和部分）已经被赋予了一个自定义类，我们可以使用它在我们的 CSS 中定位它们（​​“divi-form-focus”、“divi-column-focus” ，“分节重点”）。

现在，我们需要做的就是添加我们的 CSS 代码。 为此，请在联系表单模块下添加一个代码模块。

然后在代码内容区粘贴以下代码：

确保使用必要的样式标签包装代码。

  /*add smooth transitions for focus state styles*/
  .divi-form-focus, .divi-column-focus, .divi-section-focus, .divi-form-focus h2 {
    transition: all 300ms
  }
  
  /*style form module h2 heading in form focus state*/
  .divi-form-focus:focus-within h2 {
    font-size: 14px !important;
    color: #888888;
  }
  
  /*style parent column in form focus state*/
  .divi-column-focus:focus-within {
		background: #ffffff;
    transform: scale(1.2);
    box-shadow: 0 0 30px rgba(0,0,0,0.2);
  }
  
  /*style parent section in form focus state*/
  .divi-section-focus:focus-within {
    background: rgba(255,107,90,0.15);
  }
 

请注意，每个具有元素的 CSS 类（即“divi-column-form”）的 CSS 片段都具有:focus-within伪类，以便在表单字段获得焦点时表示该元素类的样式。 一个片段在表单的焦点状态中设置表单的 h2（或标题）的样式。 一个片段在表单的焦点状态中设置父列的样式。 一个片段在表单的焦点状态中设置父部分的样式。

最后结果

这是最终结果。 请注意填写表单时不同元素如何更改样式。

最后的想法

在 Divi 中填写表单时为元素添加 CSS 焦点样式可以真正提升用户提交表单的体验。 关键是使用:focus-within伪类以及在表单处于焦点状态时添加到要设置样式的元素的自定义类。 这可以通过向页面添加最少的自定义 CSS 来完成，如果您熟悉添加自己的自定义 CSS，则可能性是巨大的。

我期待在评论中收到您的来信。

干杯!