Knop Zoeken search-button
CSS eigenschappen van het belangrijkste viewergebied
De vormgeving van de knop wordt bepaald door de volgende CSS-klassenkiezer:
.s7ecatalogsearchviewer .s7searchbutton
CSS-eigenschap
Beschrijving
width
Breedte van de knop.
height
Hoogte van de knop.
margin-top
De verschuiving vanaf de bovenkant van de besturingsbalk.
margin-left
De afstand tot de volgende knoop op de linkerzijde, of de linkerkant van de controlebar als deze knoop eerste in een rij is.
background-image
De afbeelding die voor een bepaalde knopstatus wordt weergegeven.
background-position
Positie binnen illustratie-sprite, als CSS-sprites worden gebruikt.
Zie ook CSS Sprites.
NOTE
Deze knop ondersteunt de
state - en selected -kenmerkkiezers, die kunnen worden gebruikt om verschillende skins toe te passen op verschillende knoptoestanden.Met name
selected='false' komt overeen met de eerste status van de schuifknop en selected='true' komt overeen met de status wanneer het deelvenster Zoeken actief is.De knopinfo kan worden gelokaliseerd. Zie Localisatie van gebruikersinterfaceelementen voor meer informatie.
Voorbeeld: om een zoekknop in te stellen van 28 x 28 pixels en een andere afbeelding weer te geven voor elk van de vier verschillende knopstatussen, indien geselecteerd of niet geselecteerd.
.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