Search button

CSS properties of the main viewer area

The appearance of the button is controlled with the following CSS class selector:

.s7ecatalogsearchviewer .s7searchbutton

CSS property

Description

width

Width of the button.

height

Height of the button.

margin-top

Te offset from the top of the control bar.

margin-left

The distance to the next button on the left, or the left side of the control bar if this is the first button in a row.

background-image

The image that is displayed for a given button state.

background-position

Position inside artwork sprite, if CSS sprites are used.

See also CSS Sprites .

NOTE

This button supports the state and selected attribute selectors, which can be used to apply different skins to different button states.

In particular, selected='false' corresponds to the initial scroll button state, and selected='true' corresponds to the state when the search panel is active.

The button tool tip can be localized. See Localization of user interface elements for more information.

Example - to set up a Search button that is 28 x 28 pixels, and displays a different image for each of the four different button states when selected or not selected.

.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);  
}

On this page