內嵌共用

內嵌共用工具包含新增至Social共用面板的按鈕，以及啟動工具時顯示的強制回應對話方塊。 按鈕的位置由Social分享工具完全管理。

內嵌共用按鈕的外觀由下列CSS類別選取器控制：

.s7ecatalogsearchviewer .s7embedshare

內嵌共用工具的CSS屬性

width	按鈕寬度。
height	按鈕高度。
背景 — 影像	針對指定按鈕狀態顯示的影像。
背景位置	如果使用CSS精靈，則位於圖稿精靈內。 另請參閱 CSS Sprite .

您可以透過設定 display:none 其CSS類上的CSS屬性。

按鈕工具提示可以本地化。 請參閱 用戶介面元素本地化 以取得更多資訊。

範例 — 若要設定28 x 28像素的內嵌共用按鈕，並針對四個不同按鈕狀態中的每個狀態顯示不同的影像：

.s7ecatalogsearchviewer .s7embedshare {
 width:28px;
 height:28px;
}
.s7ecatalogsearchviewer .s7embedshare[state='up'] {
background-image:url(images/v2/EmbedShare_dark_up.png);
}
.s7ecatalogsearchviewer .s7embedshare[state='over'] {
background-image:url(images/v2/EmbedShare_dark_over.png);
}
.s7ecatalogsearchviewer .s7embedshare[state='down'] {
background-image:url(images/v2/EmbedShare_dark_down.png);
}
.s7ecatalogsearchviewer .s7embedshare[state='disabled'] {
background-image:url(images/v2/EmbedShare_dark_disabled.png);
}

當對話方塊作用中時，會覆蓋網頁的背景覆蓋圖會由下列CSS類別選取器控制：

.s7ecatalogsearchviewer .s7embeddialog .s7backoverlay

背景覆蓋的CSS屬性

不透明度	背景覆蓋圖不透明度。
背景顏色	背景覆蓋圖顏色。

範例：若要設定背景覆蓋圖為灰色且不透明度為70%:

.s7ecatalogsearchviewer .s7embeddialog .s7backoverlay {
 opacity:0.7;
 background-color:#222222;
}

依預設，強制回應對話方塊會顯示在案頭系統的畫面中央，並在觸控裝置上取用整個網頁區域。 在所有情況下，對話框的定位和大小由元件管理。 使用以下CSS類選擇器控制該對話框：

.s7ecatalogsearchviewer .s7embeddialog .s7dialog

對話框的CSS屬性

邊框半徑	對話框邊框半徑，以防對話框不佔用整個瀏覽器。
背景顏色	對話框背景顏色。
寬度	應為未設定或設為100%，在此情況下，對話方塊會取用整個瀏覽器視窗（觸控裝置最好使用此模式）。
高度	應為未設定或設為100%，在此情況下，對話方塊會取用整個瀏覽器視窗（觸控裝置最好使用此模式）。

範例：若要設定對話方塊以使用整個瀏覽器視窗，且在觸控裝置上具有白色背景：

.s7ecatalogsearchviewer .s7touchinput .s7embeddialog .s7dialog {
 width:100%;
 height:100%;
background-color: #ffffff;
}

對話框標題由表徵圖、標題文本和關閉按鈕組成。 集箱容器由

.s7ecatalogsearchviewer .s7embeddialog .s7dialogheader

對話框標題的CSS屬性

填補	頁首內容的內部邊框間距。

圖示和標題文字會包裝在由

.s7ecatalogsearchviewer .s7embeddialog .s7dialogheader .s7dialogline

對話框行的CSS屬性

填補	頁首圖示和標題的內邊框間距

使用下列CSS類選擇器控制標題表徵圖

.s7ecatalogsearchviewer .s7embeddialog .s7dialogheadericon

對話框標題表徵圖的CSS屬性

寬度	圖示寬度。
高度	圖示高度。
背景 — 影像	圖示影像。
背景位置	如果使用CSS精靈，則位於圖稿精靈內。 另請參閱 CSS Sprite .

使用下列CSS類選擇器控制標題：

.s7ecatalogsearchviewer .s7embeddialog .s7dialogheadertext

對話框標題文本的CSS屬性

字型粗細	字型寬度。
字型大小	字型高度。
字型系列	字型系列。
填補	內部文字邊框間距。

使用下列CSS類選擇器控制關閉按鈕：

.s7ecatalogsearchviewer .s7embeddialog .s7closebutton

關閉按鈕的CSS屬性

頂部	相對於標題容器的垂直按鈕位置。
右側	相對於標題容器的水準按鈕位置。
寬度	按鈕寬度。
高度	按鈕高度。
填補	按鈕的內邊框間距。
背景 — 影像	每個狀態的按鈕影像。
背景位置	如果使用CSS精靈，則位於圖稿精靈內。 另請參閱 CSS Sprite .

按鈕工具提示可以本地化。 請參閱 用戶介面元素本地化 以取得更多資訊。

範例 — 若要使用邊框間距、24 x 14像素圖示和粗體16點標題來設定對話方塊標題。 最後，28 x 28像素的「關閉」按鈕，從頂部放置兩個像素，從對話框容器的右側放置兩個像素：

.s7ecatalogsearchviewer .s7embeddialog .s7dialogheader {
 padding: 10px;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogheader .s7dialogline {
 padding: 10px 10px 2px;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogheadericon {
    background-image: url("images/sdk/dlgembed_cap.png");
    height: 14px;
    width: 24px;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogheadertext {
    font-size: 16pt;
    font-weight: bold;
    padding-left: 16px;
}
.s7ecatalogsearchviewer .s7embeddialog .s7closebutton {
 top:2px;
 right:2px;
 padding:8px;
 width:28px;
 height:28px;
}
.s7ecatalogsearchviewer .s7embeddialog .s7closebutton[state='up'] {
 background-image:url(images/sdk/close_up.png);
}
.s7ecatalogsearchviewer .s7embeddialog .s7closebutton[state='over'] {
 background-image:url(images/sdk/close_over.png);
}
.s7ecatalogsearchviewer .s7embeddialog .s7closebutton[state='down'] {
 background-image:url(images/sdk/close_down.png);
}
.s7ecatalogsearchviewer .s7embeddialog .s7closebutton[state='disabled'] {
 background-image:url(images/sdk/close_disabled.png);
}

對話方塊頁尾由「取消」按鈕組成。 頁尾容器可透過下列CSS類別選取器控制：

.s7ecatalogsearchviewer .s7embeddialog .s7dialogfooter

對話框頁尾的CSS屬性

border

可用於以視覺方式將頁尾與對話框其餘部分分開的邊框。

頁腳具有保持按鈕的內容器。 它由下列CSS類別選取器控制：

.s7ecatalogsearchviewer .s7embeddialog .s7dialogbuttoncontainer

對話框按鈕容器的CSS屬性

填補	頁尾和按鈕之間的內邊框間距。

使用以下CSS類選擇器控制「全部選擇」按鈕：

.s7ecatalogsearchviewer .s7embeddialog .s7dialogactionbutton

按鈕僅在案頭系統上可用。

「全部選擇」按鈕的CSS屬性

寬度	按鈕寬度。
高度	按鈕高度。
color	每個狀態的按鈕文字顏色。
背景顏色	每個狀態的按鈕背景顏色。

使用下列CSS類選擇器控制取消按鈕：

.s7ecatalogsearchviewer .s7embeddialog .s7dialogcancelbutton

對話框取消按鈕的CSS屬性

寬度	按鈕寬度。
高度	按鈕高度。
色彩	每個狀態的按鈕文字顏色。
背景顏色	每個狀態的按鈕背景顏色。

此外，這兩個按鈕都共用通用的CSS類，這些類可以包含其他對話框按鈕相同的CSS設定：

.s7ecatalogsearchviewer .s7embeddialog .s7dialogfooter .s7button

按鈕的CSS屬性

字型粗細	按鈕字型寬度。
字型大小	按鈕字型大小。
字型系列	按鈕字型系列。
線高	按鈕內的文字高度。 影響垂直對齊。
框陰影	陰影。
邊距 — 右	右鍵邊距。

按鈕工具提示可以本地化。 請參閱 用戶介面元素本地化 以取得更多資訊。

示例 — 要使用64 x 34 Cancel按鈕、82 x 34 Select All按鈕設定對話框頁尾，並且每種按鈕狀態的文本顏色和背景顏色不同：

.s7ecatalogsearchviewer .s7embeddialog .s7dialogfooter {
    border-top: 1px solid #909090;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogbuttoncontainer {
    padding-bottom: 6px;
    padding-top: 10px;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogfooter .s7button {
    box-shadow: 1px 1px 1px #999999;
    color: #FFFFFF;
    font-size: 9pt;
    font-weight: bold;
    line-height: 34px;
    margin-right: 10px;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogcancelbutton {
 width:64px;
 height:34px;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogcancelbutton[state='up'] {
 background-color:#666666;
 color:#dddddd;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogcancelbutton[state='down'] {
 background-color:#555555;
 color:#ffffff;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogcancelbutton[state='over'] {
 background-color:#555555;
 color:#ffffff;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogcancelbutton[state='disabled'] {
 background-color:#b2b2b2;
 color:#dddddd;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogactionbutton {
 width:82px;
 height:34px;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogactionbutton[state='up'] {
 background-color:#333333;
 color:#dddddd;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogactionbutton[state='down'] {
 background-color:#222222;
 color:#cccccc;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogactionbutton[state='over'] {
 background-color:#222222;
 color:#cccccc;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogactionbutton[state='disabled'] {
 background-color:#b2b2b2;
 color:#dddddd;
}

主對話框區域（在頁首和頁尾之間）包含右側的可滾動對話框內容和滾動面板。 在所有情況下，元件會管理此區域的寬度，因此無法在CSS中設定它。 主對話框區域由以下CSS類選擇器控制：

.s7ecatalogsearchviewer .s7embeddialog .s7dialogviewarea

對話框查看區域的CSS屬性

高度	主對話框區域的高度。 只有在對話方塊以案頭模式運作時，才應指定它。 當對話方塊的大小為佔用整個瀏覽器視窗時，則不適用。
背景顏色	主對話框區域的背景顏色。
margin	外邊距。

範例 — 若要將主對話方塊區域設定為300像素高、有10個像素邊距，並使用白色背景：

.s7ecatalogsearchviewer .s7embeddialog .s7dialogviewarea {
 background-color:#ffffff;
 margin:10px;
 height:300px;
}

所有表單內容（如標籤和輸入欄位）都駐留在由以下CSS類選擇器控制的容器內：

.s7ecatalogsearchviewer .s7embeddialog .s7dialogbody

如果此容器的高度似乎大於主對話框區域，則元件會自動啟用垂直捲動。

對話框主體的CSS屬性

填補

內部填充。

範例：若要設定表單內容，應有十個像素邊框間距：

.s7ecatalogsearchviewer .s7embeddialog .s7dialogbody {
    padding: 10px;
}

對話框窗體中的所有靜態標籤都使用

.s7ecatalogsearchviewer .s7embeddialog .s7dialoglabel

此類不適合控制標籤大小或位置，因為您可以將其應用於表單用戶介面中各個位置的文本。

對話框標籤的CSS屬性。 ​

字型粗細	標籤字型寬度。
字型大小	標籤字型大小。
字型系列	標籤字型系列。
色彩	標籤文本顏色。

對話方塊標籤可以翻譯。 請參閱 用戶介面元素本地化 以取得更多資訊。

範例：若要將所有標籤設為灰色、粗體和九像素字型：

.s7ecatalogsearchviewer .s7embeddialog .s7dialoglabel {
    color: #666666;
    font-size: 9pt;
    font-weight: bold;
}

顯示在內嵌程式碼頂端的文字副本大小由下列CSS類別選取器控制：

.s7ecatalogsearchviewer .s7embeddialog .s7dialoginputwide

對話框輸入範圍欄位的CSS屬性

寬度	輸入欄位寬度。
填補	內部填充。

範例：若要將文字副本設定為430像素寬，且底部有10個像素邊框：

.s7ecatalogsearchviewer .s7embeddialog .s7dialoginputwide {
    padding-bottom: 10px;
    width: 430px;
}

內嵌程式碼會包裝在容器中，並透過下列CSS類別選取器加以控制：

.s7ecatalogsearchviewer .s7embeddialog .s7dialoginputcontainer

對話框輸入容器的CSS屬性

寬度	內嵌程式碼容器的寬度。
邊框	內嵌程式碼容器周圍的邊框。
填補	內部填充。

範例：若要在內嵌程式碼文字周圍設定一個像素灰色邊框，請使其寬430像素，並有10個像素邊框間距：

.s7ecatalogsearchviewer .s7embeddialog .s7dialoginputcontainer {
    border: 1px solid #CCCCCC;
    padding: 10px;
    width: 430px;
}

實際的內嵌程式碼文字由下列CSS類別選取器控制：

.s7ecatalogsearchviewer .s7embeddialog .s7dialoginputcontainer

對話框輸入容器的CSS屬性

繞字

文字繞排樣式。

範例：若要設定要使用的內嵌程式碼 break-word 文字繞排：

.s7ecatalogsearchviewer .s7embeddialog .s7dialogmessage {
    word-wrap: break-word;
}

內嵌大小標籤和下拉式清單位於對話方塊底部，並放入由下列CSS類別選取器控制的容器中：

.s7ecatalogsearchviewer .s7embeddialog .s7dialogembedsizepanel

對話框的CSS屬性內嵌大小面板

填補

內部填充。

範例：若要設定內嵌大小面板，使邊框間距為10像素：

.s7ecatalogsearchviewer .s7embeddialog .s7dialogembedsizepanel {
    padding: 10px;
}

內嵌大小標籤的大小和對齊方式由下列CSS類別選取器控制：

.s7ecatalogsearchviewer .s7embeddialog .s7dialogembedsizepanel

對話框的CSS屬性內嵌大小面板

垂直對齊	垂直標籤對齊。
寬度	標籤寬度。

範例：若要將內嵌大小標籤設為對齊最上方和寬80像素：

.s7ecatalogsearchviewer .s7embeddialog .s7dialogembedsizelabel {
    vertical-align: top;
    width: 80px;
}

內嵌大小下拉式方塊的寬度由下列CSS類別選取器控制：

.s7ecatalogsearchviewer .s7embeddialog .s7combobox

組合框的CSS屬性

寬度

組合框寬度。

範例：若要在顯示預先定義的項目時將內嵌大小下拉式方塊設定為300像素寬，在顯示自訂大小時設定為110像素寬：

.s7ecatalogsearchviewer .s7embeddialog .s7combobox[expanded="true"] {
    width: 300px;
}
.s7ecatalogsearchviewer .s7embeddialog .s7combobox[expanded="false"] {
    width: 110px;
}

組合框文本的高度由特殊的內部元素定義，並由以下CSS類選擇器控制：

.s7ecatalogsearchviewer .s7embeddialog .s7combobox .s7comboboxtext

組合框文本的CSS屬性

高度

組合框文本高度。

範例：若要將內嵌大小下拉式方塊文字高度設為40像素：

.s7ecatalogsearchviewer .s7embeddialog .s7combobox .s7comboboxtext {
    height: 40px;
}

組合方塊右側有「下拉式」按鈕，可透過下列CSS類別選取器加以控制：

.s7ecatalogsearchviewer .s7embeddialog .s7combobox .s7comboboxbutton

組合框按鈕的CSS屬性

頂部	下拉框內的垂直按鈕位置。
右側	組合框內的水準按鈕位置。
寬度	按鈕寬度。
高度	按鈕高度。
背景 — 影像	每個狀態的按鈕影像。
背景位置	如果使用CSS精靈，則位於圖稿精靈內。 另請參閱 CSS Sprite .

範例：若要將下拉式按鈕設為28 x 28像素，並為每個狀態提供個別影像：

.s7ecatalogsearchviewer .s7embeddialog .s7combobox .s7comboboxbutton {
 width:28px;
 height:28px;
}
.s7ecatalogsearchviewer .s7embeddialog .s7combobox .s7comboboxbutton[state='up'] {
 background-image:url(images/sdk/cboxbtndn_up.png);
}
.s7ecatalogsearchviewer .s7embeddialog .s7combobox .s7comboboxbutton[state='over'] {
 background-image:url(images/sdk/cboxbtndn_over.png);
}
.s7ecatalogsearchviewer .s7embeddialog .s7combobox .s7comboboxbutton[state='down'] {
 background-image:url(images/sdk/cboxbtndn_over.png);
}
.s7ecatalogsearchviewer .s7embeddialog .s7combobox .s7comboboxbutton[state='disabled'] {
 background-image:url(images/sdk/cboxbtndn_up.png);
}

下列CSS類別選取器可控制下列面板，其中包含開啟下拉式方塊時顯示的內嵌大小清單：

.s7ecatalogsearchviewer .s7embeddialog .s7comboboxdropdown

面板的大小和位置由元件控制。 無法透過CSS進行變更。

下拉式方塊的CSS屬性

邊框

面板邊框。

範例 — 若要將下拉式方塊面板設定為一個像素灰色邊框：

.s7ecatalogsearchviewer .s7embeddialog .s7comboboxdropdown {
    border: 1px solid #CCCCCC;
}

下拉式面板中的單一項目，由下列CSS類別選取器控制：

.s7ecatalogsearchviewer .s7embeddialog .s7dropdownitemanchor

下拉式項目錨點的CSS屬性

背景顏色

項目背景。

範例 — 若要將下拉式方塊面板項目設定為白色背景：

.s7ecatalogsearchviewer .s7embeddialog .s7dropdownitemanchor {
    background-color: #FFFFFF;
}

在下列CSS類選擇器控制的組合框面板內，選定項的左側顯示一個複選標籤：

.s7ecatalogsearchviewer .s7embeddialog .s7checkmark

複選標籤框的CSS屬性

寬度	圖示寬度。
高度	圖示高度。
背景 — 影像	項目影像。
背景位置	如果使用CSS精靈，則位於圖稿精靈內。 另請參閱 CSS Sprite .

範例 — 若要將勾號圖示設為25 x 25像素：

.s7ecatalogsearchviewer .s7embeddialog .s7checkmark {
    background-image: url("images/sdk/cboxchecked.png");
    height: 25px;
    width: 25px;
}

在「內嵌大小」下拉式方塊中選取「自訂大小」選項時，對話方塊右側會顯示兩個額外的輸入欄位，供使用者輸入自訂內嵌大小。 這些欄位會包裝在由下列CSS類別選取器控制的容器中：

.s7ecatalogsearchviewer .s7embeddialog .s7dialogcustomsizepanel

對話框自定義大小面板的CSS屬性

左側	與內嵌大小組合框的距離。

範例：若要將自訂大小輸入欄位面板設定為下拉式方塊右側的20像素：

.s7ecatalogsearchviewer .s7embeddialog .s7dialogcustomsizepanel {
    left: 20px;
}

每個自訂大小輸入欄位都會包裝在可轉譯邊框的容器中，並設定欄位之間的邊界。 它由下列CSS類別選取器控制：

.s7ecatalogsearchviewer .s7embeddialog .s7dialogcustomsize

對話框的CSS屬性自定義大小

邊框	輸入欄位周圍的邊框。
寬度	輸入欄位寬度。
邊際	輸入欄位邊界。
填補	輸入欄位填補。

範例 — 若要將自訂大小輸入欄位設定為一個像素灰色邊框、邊距、邊框間距，以及寬70像素：

.s7ecatalogsearchviewer .s7embeddialog .s7dialogcustomsize {
    border: 1px solid #CCCCCC;
    margin-right: 20px;
    padding-left: 2px;
    padding-right: 2px;
    width: 70px;
}

如果需要垂直滾動，則捲動條將呈現在對話框右邊附近的面板中，該面板由以下CSS類選擇器控制：

.s7ecatalogsearchviewer .s7embeddialog .s7dialogscrollpanel

對話框滾動面板的CSS屬性

寬度

捲動面板寬度。

範例：將捲動面板設定為44像素寬

.s7ecatalogsearchviewer .s7embeddialog .s7dialogscrollpanel {
    width: 44px;
}

使用以下CSS類選擇器控制捲動條區域的外觀：

.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar

捲軸的CSS屬性

寬度	捲軸寬度。
頂部	垂直捲動條從捲動面板的頂部偏移。
底部	垂直捲動條從捲動面板底部偏移。
右側	水準捲動條從捲動面板的右邊緣偏移。

範例 — 若要設定寬28像素的捲軸，並且從捲軸面板的上、右、下方有8個像素邊距：

.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar {
    bottom: 8px;
    right: 8px;
    top: 8px;
    width: 28px;
}

捲動條軌跡是頂部和底部捲動按鈕之間的區域。 元件會自動設定軌跡的位置和高度。 使用下列CSS類別選取器控制追蹤

.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrolltrack

捲動條軌道的CSS屬性

寬度	追蹤寬度。
背景顏色	追蹤背景顏色。

範例：若要設定寬28像素且背景灰色的捲軸軌道：

.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrolltrack {
width:28px;
background-color: #B2B2B2;
}

捲動條拇指在捲動軌道區域內垂直移動。 其垂直位置完全由元件邏輯控制。 不過，縮圖高度不會根據內容量而動態變更。 縮圖高度和其他方面可使用下列CSS類選擇器進行配置：

.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrollthumb

捲動條縮圖的CSS屬性

寬度	拇指寬度。
高度	拇指高度。
邊框間距 — 頂端	軌道頂端之間的垂直邊框間距。
邊框間距	軌道底部之間的垂直邊框間距。
背景 — 影像	為給定拇指狀態顯示的影像。
背景位置	如果使用CSS精靈，則位於圖稿精靈內。 另請參閱 CSS Sprite .

示例 — 要設定一個捲動條縮圖，該縮圖為28 x 45像素，在頂部和底部有10個像素邊距，並且每個狀態的圖稿都不同：

.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrollthumb {
    height: 45px;
    padding-bottom: 10px;
    padding-top: 10px;
    width: 28px;
}
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrollthumb[state="up"] {
 background-image:url("images/sdk/scrollbar_thumb_up.png");
}
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrollthumb[state="down"] {
 background-image:url("images/sdk/scrollbar_thumb_down.png");
}
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrollthumb[state="over"] {
 background-image:url("images/sdk/scrollbar_thumb_over.png");
}
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrollthumb[state="disabled"] {
 background-image:url("images/sdk/scrollbar_thumb_disabled.png");
}

使用以下CSS類選擇器控制頂部和底部捲動按鈕的外觀：

.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrollupbutton

.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton

無法使用CSS定位捲動按鈕 top, left, bottom，和 right 屬性。 反之，檢視器邏輯會自動定位。

頂部和底部捲動按鈕的CSS屬性

寬度	按鈕寬度。
高度	按鈕高度。
背景 — 影像	針對指定按鈕狀態顯示的影像。
背景位置	如果使用CSS精靈，則位於圖稿精靈內。 另請參閱 CSS Sprite .

按鈕工具提示可翻譯。 請參閱 用戶介面元素本地化 以取得更多資訊。

示例 — 要設定28 x 32像素的捲動按鈕，並且每個狀態的圖稿不同：

.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrollupbutton {
 width:28px;
 height:32px;
}
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrollupbutton[state='up'] {
background-image:url(images/sdk/scroll_up_up.png);
}
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrollupbutton[state='over'] {
 background-image:url(images/sdk/scroll_up_over.png);
}
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrollupbutton[state='down'] {
 background-image:url(images/sdk/scroll_up_down.png);
}
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrollupbutton[state='disabled'] {
 background-image:url(images/sdk/scroll_up_disabled.png);
}
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton {
 width:28px;
 height:32px;
}
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton[state='up'] {
 background-image:url(images/sdk/scroll_down_up.png);
}
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton[state='over'] {
 background-image:url(images/sdk/scroll_down_over.png);
}
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton[state='down'] {
 background-image:url(images/sdk/scroll_down_down.png);
}
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton[state='disabled'] {
 background-image:url(images/sdk/scroll_down_disabled.png);
}