通過使用指定樣式來定義自適應表單的總體外觀和樣式 主題編輯器。 此外,您還可以將內聯CSS樣式應用於單個Adaptive Form元件,並即時預覽更改。 內聯樣式會覆蓋主題中提供的樣式。
要向元件添加內聯樣式:
在窗體編輯器中開啟窗體,並將模式更改為樣式模式。 要將模式更改為樣式模式,請在頁面工具欄中按一下 > 樣式。
在頁面中選擇元件,然後按一下編輯按鈕 。 樣式屬性在邊欄中開啟。
也可以從邊欄的表單層次結構樹中選擇元件。 表單層次結構樹在提要欄中可用作表單對象。
在 樣式 模式下,可以查看「表單對象」(Form Objects)下列出的元件。 但是,邊欄中的「表單對象」清單會列出欄位和面板等元件。 欄位和面板是可包含文本框和單選按鈕等元件的通用元件。
從提要欄中選擇元件時,將看到列出的所有子元件以及選定元件的屬性。 可以選擇特定的子元件並對其進行樣式化。
按一下提要欄中的頁籤以指定CSS屬性。 可以指定屬性,如:
同樣,您可以對元件的其它部分應用樣式,如 小部件。 標題, 幫助。
點擊 完成 確認更改或 取消 來放棄更改。
以下影像描述了在將內嵌樣式應用到它之前和之後的文本欄位。
應用內聯樣式屬性之前的文本框元件
注意在應用以下CSS屬性後,文本框樣式的更改如下圖所示。
選擇器 |
CSS屬性 |
值 |
效果 |
欄位 |
邊界 |
邊框寬度=2px 邊框樣式=實體 邊框顏色=#1111 |
在欄位周圍建立2像素的黑色寬邊框 |
文本框 |
background-color |
#6495ED |
將背景顏色更改為CornflowerBlue(#6495ED) 注:可以在值欄位中指定顏色名稱或其十六進位代碼。 |
標籤 |
Dimension和位置>寬度 |
100px |
將標籤的寬度固定為100px |
欄位說明圖示 | 文本>字型顏色 | #2ECC40 | 更改幫助表徵圖臉的顏色。 |
長描述 |
text-align |
中心點 |
將幫助的詳細說明與中心對齊 |
應用內聯樣式屬性後的文本框元件
按照上述步驟,您可以選擇和設定其他元件的樣式,如面板、提交按鈕和單選按鈕。
造型屬性會因所選元件而異。
也可以在「自適應表單」中將樣式從一個元件複製並貼上到另一個元件。 在 樣式 模式,按一下元件並按一下「Copy(複製)」表徵圖 。
按一下同一類型的其他元件,然後按一下「貼上」表徵圖 來修改標籤元素的屬性。 也可按一下「清除樣式」表徵圖
來修改標籤元素的屬性。
可以為元件類型的不同狀態設定樣式。 不同的狀態包括: 焦點。 已禁用。 懸停。 錯誤。 成功, 強制。
要定義元件狀態的樣式,請執行以下操作:
在 樣式 模式,按一下元件並按一下「Edit(編輯)」表徵圖 。
使用 州 的子菜單。
為元件的選定狀態定義造型並點擊 的子菜單。
您還可以模擬成功和錯誤狀態。 按一下「展開」表徵圖查看 模擬成功 和 模擬錯誤 頁籤