Hoe de Input knop aanpassen

Online bankieren gebruikt ingang knoppen . Hemera Technologieën / Photos.com / Getty Images

Input knoppen meestal toestaan ​​dat een bezoeker van de website om de inhoud van een formulier - alles van een eenvoudige contact doos om een ​​online sollicitatie.Met behulp van cascading style sheets en een basiskennis van HTML, kunt u deze knoppen aanpassen om te verschijnen zoals u dat wilt.

instructies

  1. Open de broncode bestand voor uw formulier in Kladblok of een andere tekst of HTML-editor.

  2. Maak een stylesheet door te typen in de volgende in het & lt; head & gt;sectie van het bestand direct onder de & lt; title & gt;lijn:

    & lt; style type = "text / css" & gt;
    & lt; / style & gt;

  3. Vertel uw style sheet dat je gaat om het creëren van een stijl voor de & lt; invoer & gt;knop met de klasse "mijn-button" door het invoegen van de volgende tussen de twee & lt; stijl & gt;lijnen:

    input.my-knop {}

    Voor dit precies in zijn werk, moest je de "mijn-knop" class in de knop in te dienen verklaren.Je kon een

    klasse naam die u wilt gebruiken;"mijn-knop" is slechts een voorbeeld.

  4. Pas uw inbreng knoop door te verklaren dat de regels binnen de accolades, eindigt elke regel met een puntkomma.Om te beginnen, moet u de breedte en hoogte van de knop met behulp van de "width" en "height" attributen:

    input.my-knop {
    width: 200px;
    height: 100px;
    }

  5. Verander de kleur van de knop met behulp van het attribuut "background-color", en de kleur van de tekst met de "kleur" attribuut:

    background-color: black;
    kleur: geel;

  6. Verander de grens van de knop met het attribuut "border".Binnen de grens attribuut kunt u verklaren de grens breedte in pixels, het type - gestippeld, gestormd, etc. --en kleur:

    border: 4px onderbroken gele;

  7. Het uiterlijk van het lettertype met behulp van attributen, zoals de 'font-size', 'text-transform' en 'font-family' attributen:

    font-size: 30px;
    font-family: Trebuchet MS;
    text-transform: hoofdletters;

  8. Gebruik afbeelding een aangepaste achtergrond met het attribuut "background-image".Sla de afbeelding op uw bureaublad als button.jpg.Zich te ontdoen van de 'background-color' waarde en stel "border" naar 0 in uw broncode bestand:

    background-image: url ('button.jpg');
    border: 0;

Tips & amp;Waarschuwingen

  • Vind meer style sheet attributen te gebruiken om uw inbreng knoppen aan te passen door te kijken over de Mozilla Developer Network CSS referentielijst (zie bronnen).

Resources

  • Mozilla Developer Network: CSS Reference
879
0
1
Web Design