Knop Zoeken search-button
CSS-eigenschappen van het hoofdviewergebied
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.
achtergrondafbeelding
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 oorspronkelijke toestand van de schuifknop, en selected='true' komt overeen met de status wanneer het deelvenster Zoeken actief is.De knopinfo kan worden gelokaliseerd. Zie Lokalisatie van gebruikersinterface-elementen 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