Search button

Last update: 2021-12-10
  • Created for:
  • Developer
    User

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 button is the first 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);
}
Previous page
Next page

On this page