您可以使用 主題編輯器. 此外,您也可以將內嵌CSS樣式套用至個別的適用性表單元件,並即時預覽變更。 內嵌樣式會覆寫主題中提供的樣式。
若要將內嵌樣式新增至元件:
在表單編輯器中開啟表單,並將模式變更為樣式模式。 若要將模式變更為樣式模式,請在頁面工具列中,點選 > 樣式.
在頁面中選取元件,然後點選「編輯」按鈕 . 樣式屬性在側欄中開啟。
您也可以從側欄的表單階層樹狀結構中選取元件。 表單層次結構樹在側欄中作為表單對象可用。
在 樣式 模式中,您可以在「表單對象」下看到列出的元件。 不過,側欄中的「表單物件」清單會列出欄位和面板等元件。 欄位和面板是可包含元件(例如文字方塊和選項按鈕)的通用元件。
從側欄中選取元件時,您會看到列出的所有子元件以及所選元件的屬性。 您可以選取特定的子元件並設定其樣式。
按一下側邊欄中的索引標籤以指定CSS屬性。 您可以指定屬性,例如:
同樣地,您也可以為元件的其他部分套用樣式,例如 介面工具集, 註解,和 說明.
點選 完成 確認變更或 取消 放棄更改。
下列影像說明套用內嵌樣式之前和之後的文字欄位。
應用內嵌樣式屬性之前的文本框元件
請注意,在套用下列CSS屬性後,文字方塊樣式的變更如下列影像所示。
選擇器 |
CSS屬性 |
值 |
效果 |
欄位 |
邊框 |
邊框寬度= 2px 邊框樣式=實線 邊框顏色=#1111 |
在欄位周圍建立黑色2像素寬的邊框 |
文字方塊 |
background-color |
#6495ED |
將背景顏色更改為CornflowerBlue(#6495ED) 注意:您可以在值欄位中指定顏色名稱或其十六進位代碼。 |
標籤 |
Dimension與位置>寬度 |
100px |
將標籤的寬度修正為100px |
欄位說明圖示 | 文字>字型顏色 | #2ECC40 | 更改幫助表徵圖表面的顏色。 |
詳細說明 |
text-align |
中心點 |
將說明的詳細說明與中心對齊 |
套用內嵌樣式屬性後的文字方塊元件
依照上述步驟,您可以選取其他元件(例如面板、提交按鈕和選項按鈕)並設定其樣式。
樣式屬性會根據您選取的元件而有所不同。
您也可以將樣式從一個元件複製並貼到適用性表單中的另一個元件。 在 樣式 模式,點選元件並點選「複製」圖示 .
點選相同類型的其他元件,然後點選「貼上」圖示 來貼上複製的樣式。 您也可以點選「清除樣式」圖示
來清除已套用的樣式。
您可以為元件類型的不同狀態設定樣式。 不同的狀態包括: 焦點, 已停用, 暫留, 錯誤, 成功,和 必填.
要定義元件的狀態的樣式,請執行以下操作:
在 樣式 模式,點選元件並點選「編輯」圖示 .
使用 狀態 下拉式清單。
為元件的選定狀態定義樣式並點選 以儲存屬性。
您也可以模擬成功和錯誤狀態。 點選「展開」圖示以檢視 模擬成功 和 模擬錯誤 選項。