Hvordan justere Input elementer innen Knapper med CSS
Webskjemaer bruke "<input>" tag å skape "Submit" knapper, selv om inngangselementene generelt også omfatte tekstfelt av mange slag, alt fra navn til telefonnumre og datoer. Bruk en ID-velgeren i CSS for å målrette bare på knappen i et kryss-nettleser kompatibel mote. Juster teksten i knappen ved hjelp av CSS egenskaper som endrer padding, fonter og farger. Disse egenskapene kan hjelpe deg med å finjustere "Send" knappene slik at de ser godt justert og riktig formatert.
Bruksanvisning
1 Åpne websiden som inneholder "Send" -knappen i Notepad eller en kode editor. Se etter "<style>" tags mellom dine "<head>" koder og legge denne koden hvis du ikke finner dem:
<Style type = "text / css">
</ Style>
Alle dine CSS-kode går mellom "<style>" tags.
2 Bla ned til slutten av webskjema kode og se etter en kode som ligner på denne:
<Input type = "submit" name = "submit" id = "submit" value = "Send" />
Finn navnet ID; i eksempelet, er ID-navnet "Send". Endre teksten for knappen ved å endre "verdi" eiendom hvis du ønsker å gjøre det annerledes.
3 Gå tilbake til "<style>" tags og skrive denne koden:
sende inn {
padding: 20px 10px;
}
Change "send" for å matche ID navnet du finner inne i "<input>" tag. Sett padding for på knappen for å skape avstand mellom knappen teksten og kanten av knappen. I det ovenstående eksempel er den første verdi for polstring angir den vertikale polstringen, mens den annen verdi angir den horisontale polstring.
4 Angi skrift hjelp "font-family" og style knappen teksten etter behov, ved hjelp av fet eller kursiv tekst:
sende inn {
padding: 20px 10px;
font-family: Arial;
font-style: italic;
font-weight: bold;
}
5 Gi knapp tekst en farge:
sende inn {
padding: 20px 10px;
font-family: Arial;
font-style: italic;
font-weight: bold;
color: blue;
}
Hint
- Hvis du ikke trenger kompatibilitet med Internet Explorer versjon 6 til 8, erstatte "#send" med "input [type = 'submit']" for mer fleksibel kode. I dette tilfellet, "send" er ikke ID navnet, men typen av inntakselementet.
- Legg til "float: right;" til høyre justere din knapp med webskjema.