Nwlapcug.com


Come impostare l'immagine di sfondo per un pulsante di ricerca in CSS

Come impostare l'immagine di sfondo per un pulsante di ricerca in CSS


Cascading Style Sheet (CSS) codice offre ai progettisti web ottimizzare controllo sopra l'aspetto di un sito Web. A causa del modo che ogni browser e computer usa un pulsante di ricerca di stile diverso come predefinito, web designer dovrebbe guardare modi per impostare le proprie regole di stile per loro. Il modo migliore per un pulsante di ricerca di stile è quello di impostare uno sfondo personalizzato e modificare lo stile del suo testo.

Istruzioni

1

Aprire il file contenente il codice per il pulsante di ricerca del tuo sito Web. Nella maggior parte dei casi, il pulsante è scritto come un tag < input > con il "tipo" attributo impostato su "submit" in questo modo: < input type = "submit" / >. Quando viene utilizzato per l'invio di un termine di ricerca, ma la cosa importante è identificare il pulsante nel codice, questo tag probabile contiene anche altri attributi.

2

Cercare l'attributo ID del pulsante di ricerca. Aggiungere un ID, se il pulsante di < input > del tag non ha ancora uno. È un esempio di codice del pulsante con un ID: < input type = "submit" id = "il nome id" / >. Si si rivolgerà questo tag e ID nel codice CSS.

3

Aprire il file CSS del tuo sito Web se ne esiste già uno, o aggiungere < style > e < / stile > tag tra il file HTML < head > e < / head > Tag. Begin la regola CSS prendendo di mira il tuo pulsante in questo modo: {} #the-id-nome di input.

4

Tra le parentesi graffe nel codice CSS, digitare quanto segue: sfondo: URL(path-to-your-background.png); Il percorso del file grafico che si desidera utilizzare come sfondo va tra le parentesi dopo "URL". Il codice finale dovrebbe assomigliare a questo: the # id-nome di input {background: URL(path-to-your-background.png);}

5

Aggiungere la regola di stile "border: 0;" al codice CSS. Questa regola, come ogni altra regola CSS, va tra le parentesi graffe. Per impostazione predefinita, browser impostare i bordi intorno a pulsanti e questi bordi aspetto brutti quando è impostato uno sfondo. È possibile anche impostare un bordo diverso da quello predefinito, ad esempio "border: 1px solid #cccccc" per un bordo grigio ampio, solido, luce di un pixel.

6

Modificare lo stile del carattere per il pulsante con l'aggiunta di regole di stile CSS per il colore, famiglia di font o dimensione del carattere. Effetti di colore il colore del carattere. Le opzioni sono infinite: utilizzare qualsiasi regola di stile CSS per modificare l'aspetto del pulsante. Per un pulsante con uno sfondo blu, è possibile impostare testo grassetto, bianco per il pulsante in questo modo: the # id-nome di input {background: URL(path-to-your-background.png); color: #fff; font-weight: bold;}

7

Salvare i file e quindi aprire la pagina web in un browser. Caricare i file su un server in primo luogo, se contengono un codice sul lato server come PHP o ASP. Check-in del browser che mostra lo sfondo sul vostro tasto.

Consigli & Avvertenze

  • Un grafico di codice CSS. tenere portata di mano, caricando in una scheda nel tuo browser o di stamparlo e pubblicarlo sulla tua bacheca. Modificare i file HTML e CSS nell'editor di testo o codice.