Slik fjerner skyggen av HTML Text Input
HTML tekstskriving boksene brukes i skjemaer for å samle brukerinformasjon. Naturlig de inkluderer skygger basert på hvilken nettleser du bruker. Safari, for eksempel, har den blå sveve rundt boksen når fokusert på boksen. Ved hjelp av CSS kan fjerne skyggen fra inngangstekstbokser og tilpasse dem til å passe utformingen av hele nettstedet. De fleste ganger en utvikler vil opprettholde boksen følelse, men av og til en grafisk design vil bli brukt til en tekstboks. En oppgave som å fjerne en tekstskygge bør ikke ofre funksjonaliteten form element, men forbedre den.
Bruksanvisning
1 Åpne en tekst editor som Dreamweaver eller BBEdit (se Ressurser) og lage en HTML-fil. Sett inn et HTML-skjema som inkluderer minst en inngang med type = "text". Lag et stilark fil og gi den navnet "main.css."
2 Lag en CSS-klasse for innspill tekstbokser. Gi den et navn som er i nærheten av hva det vil style som "tekstbokser." Denne klassen navnet vil ligge i din stilark-fil og vil holde stilen definisjonen for tekstbokser.
3 Definere attributtene for CSS-klasse. Her er eksempler på spesifikke attributter du måtte ha for å definere:
border: 1px solid # 000000;
font-size: 14px;
color: # 333333;
padding: 5px 5px 5px 5px;
bakgrunn: url ( "images / myinputbox.jpg") 0 0 no-repeat;
width: 300px;
position: relative;
float: left;
Endring av grensen attributtet er det viktigste å endre noen skriving attributt. Det er som regel det som bestemmer skygge rundt tekstboksen. Justering padding kan du finne ut hvor mye plass (i piksler) fra innsiden av tekstboksen. Skriftstørrelse og farge lar deg bestemme inngangs boksens tekststørrelse og farge. Legge til en bakgrunn lar deg tilpasse dine innspill tekstboksen for å følge nettstedets design.
4 Legg klassen du opprettet noen skriving du ønsker stylet. Følg dette formatet:
<Input type = "text" name = "mytextbox" class = "tekstbokser" value = "test" />
Bruk samme klasse for hver tekstfeltet slik at den samme stilen vil bli brukt like mye på alle innspill tekstboksene.
5 Sett inn stilark filen i HTML-filen i <head> -taggen. Følg dette formatet:
<Link rel = "stylesheet" href = "main.css" type = "text / css" />
Åpne HTML-filen i en nettleser og vise input boksen (e) du opprettet. Revidere stilark fil som er nødvendig for å oppnå ønsket utseende.