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

December 6

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


Sheet (CSS) del codice Cascading Style dà web designer il controllo regolare con precisione sopra l'aspetto di un sito web e si sentono. A causa del modo in cui tutti i browser e computer utilizza un diverso pulsante di ricerca di stile come il suo predefinito, web designer devono trovare il modo di fissare le proprie regole di stile per loro. Il modo migliore per lo stile un pulsante di ricerca è quello di impostare uno sfondo personalizzato e modificare lo stile del suo testo.

istruzione

1 Aprire il file che contiene il codice per il tasto di ricerca del tuo sito web. Nella maggior parte dei casi, il pulsante è scritto come un tag <input> con l'attributo "tipo" è impostato su "invia" in questo modo: <input type = "submit" />. Questo tag probabilmente contiene anche altri attributi quando viene utilizzato per la presentazione di un termine di ricerca, ma la cosa importante è quello di identificare il pulsante nel codice.

2 Cercare attributo ID del pulsante di ricerca. Aggiungere un ID, se tag <input> del pulsante non ha ancora uno. Un esempio di codice del pulsante con un ID è: <input type = "submit" id = "la-id-name" />. Si indirizzare questo tag e ID nel codice CSS.

3 Aprire il file CSS del tuo sito web se ne esiste già, o aggiungere <style> e </ style> tag tra il file HTML <head> e </ head> tag. Iniziare la regola CSS di mira il pulsante in questo modo: ingresso # the-id-name {}.

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 tuo codice finale dovrebbe essere simile a questo: ingresso # the-id-name {background: URL (path-to-your-background.png);}

5 Aggiungere la regola di stile "border: 0;" per il codice CSS. Questa regola, come ogni altra regola CSS, va tra le parentesi graffe. Per impostazione predefinita, i browser impostati i bordi intorno a pulsanti, e questi confini si vedono molto male quando uno sfondo è impostato. È anche possibile impostare un confine diverso da quello predefinito, ad esempio "border: 1px #CCCCCC solido" per un one-pixel di larghezza solido bordo grigio,, luce.

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

7 Salvare i file e quindi aprire la pagina web in un browser. Caricare i file su un server prima, se contengono alcun codice lato server come PHP o ASP. Il check-in del browser che lo sfondo mostra sul pulsante.

Consigli e avvertenze

  • Mantenere un grafico codice CSS a portata di mano, o caricandolo in una scheda nel browser o stampando fuori e la pubblicazione sul vostro muro. Modifica i file CSS e HTML sia in un solo testo o un editor di codice.