最適化表單元件的內嵌樣式

您可以使用主題編輯器指定樣式,來定義最適化表單的整體外觀和樣式。 此外,您也可以將內嵌CSS樣式套用至個別的可調式表單元件,並即時預覽變更。 內嵌樣式會覆寫主題中提供的樣式。

套用內嵌CSS屬性

若要新增內嵌樣式至元件:

  1. 在表單編輯器中開啟您的表單,並將模式變更為樣式模式。 若要將模式變更為樣式模式,請在頁面工具列中,點選canvas-drop-down > Style

  2. 在頁面中選擇一個元件,然後點選編輯按鈕edit-button。 樣式屬性會在側欄中開啟。

    您也可以從側欄的表單階層樹狀結構中選取元件。 表單階層樹狀結構在側欄中可作為表單物件使用。

    您也可以從側欄選取元件。 在「樣式」模式中,您可以看到「表單對象」(Form Objects)下列出的元件。 不過,側欄中的「表單物件」清單會列出欄位和面板等元件。 欄位和面板是可包含元件(例如文字方塊和選項按鈕)的通用元件。

    從邊欄中選擇元件時,您會看到列出的所有子元件以及所選元件的屬性。 您可以選取特定的子元件並設定其樣式。

  3. 按一下側邊欄中的標籤以指定CSS屬性。 您可以指定屬性,例如:

    • Dimension與位置(顯示設定、填補、高度、寬度、邊界、位置、z索引、浮動、清除、溢位)
    • 文字(字型系列、粗細、顏色、大小、行高和對齊)
    • 背景(影像和漸層、背景顏色)
    • 邊框(寬度、樣式、顏色、半徑)
    • 特效(陰影、洞察力)
    • 進階(可讓您編寫元件的自訂CSS)
  4. 同樣地,您也可以套用元件其他部分的樣式,例如Widget、Caption和Help。

  5. 點選​Done​確認變更,或點選​Cancel​捨棄變更。

範例:欄位元件的內嵌樣式

下列影像會描述套用內嵌樣式前後的文字欄位。

套用內嵌樣式之前的文字方塊元件

應用內嵌樣式屬性之前的文本框元件

請注意,套用下列CSS屬性後,文字方塊樣式的變更如下圖所示。

選擇器

CSS屬性

效果

欄位

邊界

邊框寬度= 2px

邊框樣式=實線

邊框顏色=#1111

在欄位周圍建立2像素寬的黑色邊框

文字方塊

background-color

#6495ED

將背景顏色更改為CornflowerBlue(#6495ED)

注意:您可以在值欄位中指定顏色名稱或其十六進位代碼。

標籤

尺寸與位置>寬度

100px

將標籤的寬度修正為100像素

欄位說明圖示 「文字>字型顏色」 #2ECC40 變更說明圖示臉部的顏色。

詳細說明

text-align

中心點

將詳細說明對齊

套用內嵌樣式後的文字方塊樣
式圖:套用內嵌樣 式屬性後的文字方塊元件

依照上述步驟,您可以選取其他元件並設定其樣式,例如面板、提交按鈕和選項按鈕。

注意

樣式屬性會根據您選取的元件而有所不同。

本頁內容

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