自適應表單元件的內聯樣式

通過使用指定樣式來定義自適應表單的總體外觀和樣式 主題編輯器。 此外,您還可以將內聯CSS樣式應用於單個Adaptive Form元件,並即時預覽更改。 內聯樣式會覆蓋主題中提供的樣式。

應用內聯CSS屬性

要向元件添加內聯樣式:

  1. 在窗體編輯器中開啟窗體,並將模式更改為樣式模式。 要將模式更改為樣式模式,請在頁面工具欄中按一下 畫布下拉清單 > 樣式

  2. 在頁面中選擇元件,然後按一下編輯按鈕 編輯按鈕。 樣式屬性在邊欄中開啟。

    也可以從邊欄的表單層次結構樹中選擇元件。 表單層次結構樹在提要欄中可用作表單對象。

    在 樣式 模式下,可以查看「表單對象」(Form Objects)下列出的元件。 但是,邊欄中的「表單對象」清單會列出欄位和面板等元件。 欄位和面板是可包含文本框和單選按鈕等元件的通用元件。

    從提要欄中選擇元件時,將看到列出的所有子元件以及選定元件的屬性。 可以選擇特定的子元件並對其進行樣式化。

  3. 按一下提要欄中的頁籤以指定CSS屬性。 可以指定屬性,如:

    • Dimension和職位 (顯示設定、填充、高度、寬度、邊距、位置、z-index、浮點、清除、溢出)
    • 文本 (字型系列、粗細、顏色、大小、行高和對齊方式)
    • 背景 (影像和漸變,背景顏色)
    • 邊框 (寬度、樣式、顏色、半徑)
    • 效果 (陰影、不透明度)
    • 高級 (用於為元件編寫自定義CSS)
  4. 同樣,您可以對元件的其它部分應用樣式,如 小部件。 標題, 幫助。

  5. 點擊 完成 確認更改或 取消 來放棄更改。

示例:欄位元件的內聯樣式

以下影像描述了在將內嵌樣式應用到它之前和之後的文本欄位。

應用內聯樣式之前的文本框元件

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

注意在應用以下CSS屬性後,文本框樣式的更改如下圖所示。

選擇器

CSS屬性

效果

欄位

邊界

邊框寬度=2px

邊框樣式=實體

邊框顏色=#1111

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

文本框

background-color

#6495ED

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

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

標籤

Dimension和位置>寬度

100px

將標籤的寬度固定為100px

欄位說明圖示 文本>字型顏色 #2ECC40 更改幫助表徵圖臉的顏色。

長描述

text-align

中心點

將幫助的詳細說明與中心對齊

應用內聯樣式後的文本框樣式

應用內聯樣式屬性後的文本框元件

按照上述步驟,您可以選擇和設定其他元件的樣式,如面板、提交按鈕和單選按鈕。

注意

造型屬性會因所選元件而異。

複製和貼上樣式

也可以在「自適應表單」中將樣式從一個元件複製並貼上到另一個元件。 在 樣式 模式,按一下元件並按一下「Copy(複製)」表徵圖 複製

按一下同一類型的其他元件,然後按一下「貼上」表徵圖 複製 來修改標籤元素的屬性。 也可按一下「清除樣式」表徵圖 複製 來修改標籤元素的屬性。

為元件的不同狀態設定樣式

可以為元件類型的不同狀態設定樣式。 不同的狀態包括: 焦點。 已禁用。 懸停。 錯誤。 成功, 強制。

要定義元件狀態的樣式,請執行以下操作:

  1. 樣式 模式,按一下元件並按一下「Edit(編輯)」表徵圖 編輯

  2. 使用 的子菜單。

    選擇狀態

  3. 為元件的選定狀態定義造型並點擊 保存 的子菜單。

您還可以模擬成功和錯誤狀態。 按一下「展開」表徵圖查看 模擬成功模擬錯誤 頁籤

模擬狀態

本頁內容