Hvordan sette bakgrunnsbildet for en søkeknapp i CSS

Hvordan sette bakgrunnsbildet for en søkeknapp i CSS


Cascading Style Sheet (CSS) kode gir webdesignere finjustere kontroll over et nettsted utseende. På grunn av måten alle nettlesere og datamaskinen bruker en annen stil søkeknapp som standard, bør webdesignere se på måter å sette sine egne stilregler for dem. Den beste måten å style en søkeknapp er å sette en egendefinert bakgrunn og redigere stilen til sin tekst.

Bruksanvisning

1 Åpne opp filen som inneholder koden for nettstedets søkeknappen. I de fleste tilfeller er knapp skrevet som en <input> tag med "type" attributtet satt til "send" slik: <input type = "submit" />. Denne taggen sannsynligvis også inneholder andre egenskaper når den brukes til å sende inn et søkeord, men det viktigste er å identifisere knappen i koden.

2 Se etter søkeknappen ID-attributtet. Legg en ID, hvis knappen er <input> tag ennå ikke har en. Et eksempel på knapp kode med en ID er: <input type = "submit" id = "the-id-navn" />. Du vil målrette denne koden og ID i CSS-koden.

3 Åpne nettstedets CSS fil hvis det allerede eksisterer, eller legge <style> og </ style> -kodene mellom HTML-filen <head> og </ head> taggene. Begynn CSS regelen ved å målrette din knapp som så: inngang # the-id-navnet {}.

4 Mellom klammeparentes i din CSS-kode, skriver du inn følgende: bakgrunn: URL (bane-to-your-background.png); Banen til grafikkfilen du ønsker å bruke som bakgrunn går mellom parentes etter "URL". Din endelige koden skal se slik ut: inngang # the-id-navnet {bakgrunn: URL (bane-to-your-background.png);}

5 Legg stilen regelen "border: 0;" til CSS-kode. Denne regelen, som alle andre CSS regel går mellom krøllparenteser. Som standard nettlesere sette grenser rundt knapper, og disse grensene ser stygg når en bakgrunn er satt. Du kan også sette en grense enn standarden, som for eksempel "border: 1px solid #cccccc" for en en-pixel bred, solid, lys grå kant.

6 Endre skriftstil for knappen ved å legge til CSS regler for farge, font-family eller font-size. Fargeeffekter skriftfarge. Mulighetene er ubegrensede: bruke CSS stil regel å endre utseendet på knappen. For en knapp med en blå bakgrunn, kan du sette fet, hvit tekst for knappen slik: input-id-name # {background: URL (bane-to-your-background.png); farge: #fff; font-weight: bold;}

7 Lagre filene dine og deretter åpne websiden i en nettleser. Last opp filene til en server først, hvis de inneholder noen server-side kode som PHP eller ASP. Sjekk i nettleseren at bakgrunnen vises på knappen.

Hint

  • Hold en CSS-kode diagram hendig, enten ved å laste den i en fane i nettleseren eller ved å skrive den ut og legge den på veggen. Rediger HTML og CSS-filer i enten en ren tekst eller kode editor.