“搜索”按钮

主查看器区域的CSS属性

通过以下CSS类选择器控制按钮的外观:

.s7ecatalogsearchviewer .s7searchbutton

CSS属性

说明

width

按钮的宽度。

height

按钮的高度。

边距 — 顶部

与控制栏顶部的偏移。

边距 — 左

左侧的到下一个按钮的距离;或者如果这是一行中的第一个按钮,则位于控制栏的左侧。

背景图像

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

背景位置

在图稿Sprite中放置(如果使用CSS Sprite)。

另请参阅 CSS Sprite

注意

此按钮支持stateselected属性选择器,它们可用于将不同的外观应用到不同的按钮状态。

特别地,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);  
}

在此页面上