Pulsante Ricerca

Proprietà CSS dell’area visualizzatore principale

L’aspetto del pulsante è controllato con il seguente selettore di classe CSS:

.s7ecatalogsearchviewer .s7searchbutton

Proprietà CSS

Descrizione

width

Larghezza del pulsante.

height

Altezza del pulsante.

margine superiore

Offset dalla parte superiore della barra di controllo.

margine sinistro

La distanza dal pulsante successivo a sinistra o dal lato sinistro della barra di controllo, se si tratta del primo pulsante di una riga.

immagine di sfondo

Immagine visualizzata per un determinato stato del pulsante.

posizione di sfondo

Posizione all’interno dello sprite di un’immagine, se vengono utilizzati gli spriti CSS.

Vedi anche Sprite CSS .

NOTA

Questo pulsante supporta i selettori di attributi state e selected , che possono essere utilizzati per applicare interfacce diverse a diversi stati dei pulsanti.

In particolare, selected='false' corrisponde allo stato iniziale del pulsante di scorrimento e selected='true' corrisponde allo stato in cui è attivo il pannello di ricerca.

La descrizione comando del pulsante può essere localizzata. Per ulteriori informazioni, consulta Localizzazione degli elementi dell’interfaccia utente .

Esempio : per impostare un pulsante Ricerca di 28 x 28 pixel e visualizzare un’immagine diversa per ciascuno dei quattro stati del pulsante diversi quando selezionato o non selezionato.

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

In questa pagina