Slik tilpasser INPUT-knappen
Input knapper oftest tillater et nettsted besøkende å sende inn innholdet i en form - alt fra en enkel kontaktboksen til en elektronisk jobbsøknad. Ved hjelp av gjennomgripende stilark og en grunnleggende kjennskap til HTML, kan du tilpasse disse knappene til å vises slik du vil.
Bruksanvisning
1 Åpne kildekoden filen for skjemaet i Notepad eller annen tekst eller HTML editor.
2 Lag et stilark ved å skrive inn følgende i <head> delen av filen direkte under <title> linjen:
<Style type = "text / css">
</ Style>
3 Fortell din stilark som du kommer til å være å skape en stil for <input> knappen med klassen "min-knappen" ved å sette inn følgende i mellom de to <style> linjer:
input.my-knappen {}
For at dette skal fungere nøyaktig, måtte du erklære "my-knappen" class inne på send-knappen. Du kan bruke hvilken som helst klasse navnet du ønsker; "My-knappen" er bare et eksempel.
4 Tilpass innspill knappen ved å erklære regler inne i klammeparentes, slutter hver regel med et semikolon. For å begynne, endre bredden og høyden på knappen med "width" og "height" -egenskapene:
input.my-knappen {
width: 200px;
height: 100px;
}
5 Endre fargen på knappen med "background-color" attributt, og fargen på teksten med "farge" attributt:
background-color: black;
farge: gul;
6 Endre grensen på knappen med "grensen" attributt. Innenfor grensen attributtet du kan erklære bredden grensen i piksler, type - prikkete, stiplede, etc. --og farge:
border: 4px stiplet gul;
7 Endre utseendet på skriften å bruke attributter som "font-size", "text-transform," og "font-family" -egenskapene:
font-size: 30px;
font-family: Trebuchet MS;
text-transform: store bokstaver;
8 Bruk en egendefinert bakgrunnsbilde med "background-image" attributt. Lagre bildet på skrivebordet som button.jpg. Bli kvitt den "background-color" verdi og sette "grensen" til 0 i kildekoden file:
background-image: url ( 'button.jpg');
border: 0;
Hint
- Finn flere stilark attributter som skal bruke til å tilpasse inngangs knappene ved å se over Mozilla Developer Network CSS referanseliste (se Ressurser).