搜尋按鈕 search-button

Last update: Mon Jul 22 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

主題：

建立對象：

開發人員
使用者

主要檢視器區域的 CSS屬性

使用下列CSS類別選取器來控制按鈕的外觀：

.s7ecatalogsearchviewer .s7searchbutton

CSS屬性

說明

寬度

按鈕的寬度。

高度

按鈕的高度。

上邊界

從控制列頂端的位移。

左邊界

左邊下一個按鈕的距離，若此按鈕為列中的第一個按鈕，則為控制列左側的距離。

背景影像

針對指定按鈕狀態顯示的影像。

背景位置

若使用CSS拼寫，則定位在圖稿sprite內。

另請參閱 CSS Sprite。

NOTE

此按鈕支援state和selected屬性選取器，它們可用來將不同的外觀元素套用至不同的按鈕狀態。

特別是，selected='false'對應於初始捲動按鈕狀態，selected='true'對應於搜尋面板作用中的狀態。

按鈕工具提示可以本地化。如需詳細資訊，請參閱使用者介面元素的本地化。

範例 — 設定28 x 28畫素的「搜尋」按鈕，並在選取或未選取時，針對四種不同按鈕狀態分別顯示不同的影像。

.s7ecatalogsearchviewer .s7searchbutton{
 margin-top: 4px;
 margin-left: 10px;
 width:28px;
 height:28px;
 display: inline-block;
 background-size:contain;
}

.s7ecatalogsearchviewer.s7mouseinput .s7searchbutton[selected='false'][state='up'] {
 background-image:url(images/v2/Search_dark_up.png);
}
.s7ecatalogsearchviewer.s7mouseinput .s7searchbutton[selected='false'][state='over'] {
 background-image:url(images/v2/Search_dark_over.png);
}
.s7ecatalogsearchviewer.s7mouseinput .s7searchbutton[selected='false'][state='down'] {
 background-image:url(images/v2/Search_dark_down.png);
}
.s7ecatalogsearchviewer.s7mouseinput .s7searchbutton[selected='false'][state='disabled'] {
 background-image:url(images/v2/Search_dark_disabled.png);
}
.s7ecatalogsearchviewer.s7mouseinput .s7searchbutton[selected='true'][state='up'] {
 background-image:url(images/v2/Search_dark_over.png);
}
.s7ecatalogsearchviewer.s7mouseinput .s7searchbutton[selected='true'][state='over'] {
 background-image:url(images/v2/Search_dark_over.png);
}
.s7ecatalogsearchviewer.s7mouseinput .s7searchbutton[selected='true'][state='down'] {
 background-image:url(images/v2/Search_dark_over.png);
}
.s7ecatalogsearchviewer.s7mouseinput .s7searchbutton[selected='true'][state='disabled'] {
 background-image:url(images/v2/Search_dark_disabled.png);
}

recommendation-more-help

b7426f53-aad9-4c00-83fc-664f30f681e8