Sökknapp search-button

CSS-egenskaper för huvudvisningsområdet

Knappens utseende styrs med följande CSS-klassväljare:

.s7ecatalogsearchviewer .s7searchbutton

CSS-egenskap
Beskrivning
width
Knappens bredd.
height
Knappens höjd.
marginal-top
Förskjutningen från kontrollfältets överkant.
marginal-vänster
Avståndet till nästa knapp till vänster eller till vänster om kontrollfältet om den här knappen är den första i en rad.
background-image
Bilden som visas för ett visst knappläge.
background-position

Placera inuti en teckningssprite, om CSS-sprites används.

Se även CSS-fragment.

NOTE
Den här knappen har stöd för state och selected attributväljare, som kan användas för att tillämpa olika skal på olika knapplägen.
I synnerhet selected='false' motsvarar det inledande rullningsknappläget, och selected='true' motsvarar läget när sökpanelen är aktiv.

Knappens funktionsbeskrivning kan lokaliseras. Se Lokalisering av användargränssnittselement för mer information.

Exempel - om du vill ställa in en sökknapp som är 28 x 28 pixlar och visar olika bilder för vart och ett av de fyra olika knapplägena när de är markerade eller inte markerade.

.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