Show Menu
主題×

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

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

套用內嵌CSS屬性

若要新增內嵌樣式至元件:
  1. 在表單編輯器中開啟您的表單,並將模式變更為樣式模式。 若要將模式變更為樣式模式,請在頁面工具列中,點選「畫 >樣 式」
  2. 在頁面中選取元件,然後點選「編輯」按鈕 。 樣式屬性會在側欄中開啟。
    您也可以從側欄的表單階層樹狀結構中選取元件。 表單階層樹狀結構在側欄中可作為表單物件使用。
    您也可以從側欄選取元件。 在「樣式」模式中,您可以看到「表單對象」(Form Objects)下列出的元件。 不過,側欄中的「表單物件」清單會列出欄位和面板等元件。 欄位和面板是可包含元件(例如文字方塊和選項按鈕)的通用元件。
    從邊欄中選擇元件時,您會看到列出的所有子元件以及所選元件的屬性。 您可以選取特定的子元件並設定其樣式。
  3. 按一下側邊欄中的標籤以指定CSS屬性。 您可以指定屬性,例如:
    • 尺寸與位置(顯示設定、填補、高度、寬度、邊界、位置、z索引、浮動、清除、溢位)
    • 文字(字型系列、粗細、顏色、大小、行高和對齊)
    • 背景(影像和漸層、背景顏色)
    • 邊框(寬度、樣式、顏色、半徑)
    • 特效(陰影、洞察力)
    • 進階(可讓您編寫元件的自訂CSS)
  4. 同樣地,您也可以套用元件其他部分的樣式,例如Widget、Caption和Help。
  5. 點選 「完成 」以確認變更,或點選「取 」以放棄變更。

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

下列影像會描述套用內嵌樣式前後的文字欄位。
應用內嵌樣式屬性之前的文本框元件
請注意,套用下列CSS屬性後,文字方塊樣式的變更如下圖所示。
選擇器
CSS屬性
效果
欄位
邊界
邊框寬度= 2px
邊框樣式=實線
邊框顏色=#1111
在欄位周圍建立2像素寬的黑色邊框
文字方塊
background-color
#6495ED
將背景顏色更改為CornflowerBlue(#6495ED)
注意:您可以在值欄位中指定顏色名稱或其十六進位代碼。
標籤
尺寸與位置>寬度
100px
將標籤的寬度修正為100像素
欄位說明圖示 「文字>字型顏色」 #2ECC40 變更說明圖示臉部的顏色。
詳細說明
text-align
中心點
將詳細說明對齊
套用內嵌樣式後的文字方塊樣式​ ​圖:套用 內嵌樣式屬性後的文字方塊元件
依照上述步驟,您可以選取其他元件並設定其樣式,例如面板、提交按鈕和選項按鈕。
樣式屬性會根據您選取的元件而有所不同。