Slik tilpasser INPUT-knappen

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).