自适应表单组件的内联样式

您可以使用主题编辑器指定样式来定义自适应表单的整体外观和样式。 此外,您还可以将内联CSS样式应用于单个自适应表单组件并立即预览更改。 内联样式将覆盖主题中提供的样式。

应用内联CSS属性

要向组件添加内联样式,请执行以下操作:

  1. 在表单编辑器中打开表单,并将模式更改为样式模式。 要将模式更改为样式模式,请在页面工具栏中,点按画布下拉菜单 > 样式

  2. 在页面中选择一个组件,然后点按编辑按钮edit-button。 样式属性在提要栏中打开。

    您还可以从侧栏中的表单层次结构树中选择组件。 表单层次结构树在提要栏中可用作表单对象。

    您还可以从提要栏中选择组件。 在样式模式下,您可以看到在表单对象下列出的组件。 但是,侧栏中的表单对象列表会列表字段和面板等组件。 字段和面板是可包含文本框和单选按钮等组件的通用组件。

    从提要栏中选择组件时,您会看到列出的所有子组件以及选定组件的属性。 您可以选择特定的子组件并设置其样式。

  3. 单击提要栏中的选项卡以指定CSS属性。 您可以指定以下属性:

    • Dimension和位置(显示设置、填充、高度、宽度、边距、位置、z索引、浮动、清除、溢出)
    • 文本(字体系列、权重、颜色、大小、行高和对齐方式)
    • 背景(图像和渐变、背景颜色)
    • 边框(宽度、样式、颜色、半径)
    • 效果(阴影、空白)
    • 高级(允许您为组件编写自定义CSS)
  4. 同样,您也可以对组件的其他部分(如Widget、Caption和帮助)应用样式。

  5. 点按​完成​以确认更改,或点按​取消​以放弃更改。

示例:字段组件的内联样式

以下图像描述了在将内联样式应用于文本字段之前和之后的文本字段。

应用内联样式前的文本框组件

应用内联样式属性之前的文本框组件

请注意,在应用以下CSS属性后,文本框样式的更改如下图所示。

选择器

CSS属性

效果

字段

边框

边框宽度= 2像素

边框样式=实色

边框颜色=#1111

在字段周围创建黑色2像素宽边框

文本框

background-color

#6495ED

将背景颜色更改为CornflowerBlue(#6495ED)

注意:您可以在值字段中指定颜色名称或其十六进制代码。

标签

尺寸和位置>宽度

100px

将标签的宽度修复为100像素

字段帮助图标 “文本”>“字体颜色” #2ECC40 更改帮助图标面的颜色。

长描述

text-align

居中

将详细说明对齐,以便帮助居中

应用内联样式后的文本框样
式图:应 用内联样式属性后的文本框组件

按照上述步骤,您可以选择其他组件并设置其样式,如面板、提交按钮和单选按钮。

注意

样式属性因您选择的组件而异。

On this page

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now