“搜索”按钮 search-button

Last update: Sat Jul 20 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

主题：

创建对象：

开发人员
用户

主查看器区域的 CSS属性

使用以下CSS类选择器控制按钮的外观：

.s7ecatalogsearchviewer .s7searchbutton

CSS属性

说明

宽度

按钮的宽度。

高度

按钮的高度。

上边距

从控件栏顶部的偏移。

左边距

与左侧的下一个按钮或控制栏左侧的距离（如果该按钮是行中的第一个按钮）。

背景图像

针对给定按钮状态显示的图像。

背景位置

如果使用CSS sprite，则定位在图稿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