De auteur heeft het Diversity in Tech Fund geselecteerd om een donatie te ontvangen als onderdeel van het Write for DOnations-programma.
Inleiding
Webformulieren zijn een veelvoorkomend element in websiteontwerp, variërend in complexiteit van een zoekformulier tot contactformulieren en complexe gegevensfiltering. Weten hoe CSS te gebruiken om deze elementen te stylen en ermee te werken helpt bij het bieden van betere oplossingen voor deze alledaagse problemen en kan de gebruikerservaring van uw website verbeteren.
Deze tutorial behandelt de creatie en styling van een webformulier dat verschillende gegevens van de gebruiker aanvraagt. Het formulier zal tekstvelden, radioknoppen, selectievakjes, vervolgkeuzelijsten, een tekstgebied en knoppen voor verzenden en opnieuw instellen gebruiken. U zult dit formulier en de elementen ervan maken en stylen door de stijlen te resetten met de appearance-eigenschap, uw eigen consistente stijl voor het formulier in te stellen, placeholder-antwoorden toe te voegen voor de tekstvelden en de radioknoppen en selectievakjes aan te passen met verschillende pseudo-klassen en pseudo-elementen.
Vereisten
- Ervaring met het gebruik van geavanceerde selectoren om stijlen te vinden en toe te passen op HTML-elementen met CSS. Voor meer informatie hierover, bekijk de tutorial Hoe HTML-elementen te selecteren met ID, Class en Attribute Selectors in CSS.
- Kennis van het CSS-boxmodel, dat je kunt vinden in de tutorial Hoe te werken met het Box Model in CSS.
- Bekendheid met pseudo-klassen in CSS. Bekijk Hoe Links en Knoppen te gebruiken met State Pseudo-Classes in CSS voor een introductie.
- Een leeg HTML-bestand opgeslagen op je lokale machine als
index.html, dat je kunt openen vanuit je teksteditor en webbrowser naar keuze. Om te beginnen, bekijk onze tutorial Hoe je je HTML-project opzet, en volg Hoe HTML-elementen te gebruiken en te begrijpen voor instructies over hoe je je HTML in je browser kunt bekijken. Als je nieuw bent met HTML, probeer dan de hele serie Hoe je een website bouwt met HTML.
Het instellen van de basis HTML en CSS
In deze eerste sectie zul je de HTML en initiële stijlen instellen waarmee je gedurende de rest van de tutorial zult werken. Deze HTML zal het skelet van de pagina opzetten en de formulier velden creëren die je later zult stylen.
Begin door het index.html bestand te openen in je editor. Voeg vervolgens de volgende HTML toe om een basisstructuur voor het bestand te bieden:
De elementen die zijn opgenomen in het <head> element definiëren de naam van de pagina met het <title> element en waar de stylesheet geladen moet worden via het <link> element. De <meta> tags definiëren de karaktercodering en instrueren de browser over hoe de site op een klein scherm moet worden weergegeven. De belangrijkste formulierinhoud zal zich bevinden binnen de <body> en <main> tags.
Vervolgens, binnen het <main> element, maak een <form> element aan. Binnen <form> zul je verschillende formulierelementen en <div> elementen toevoegen om te helpen bij de lay-out. In deze tutorial worden toevoegingen aan de code van eerdere stappen gemarkeerd. Voeg de gemarkeerde HTML uit het volgende codeblok toe aan je index.html bestand:
De HTML-formulierstructuur bestaat uit onderling verbonden attribuutwaarden om correct te functioneren. Deze code maakt een formulier dat een gebruiker vraagt om hun naam en e-mail, vraagt naar hun favoriete CSS-compiler en of ze CSS-grid kennen, voorziet in een veld voor een door de gebruiker gegenereerd bericht, en heeft een selectievakje om de gebruiker zich aan te melden voor een nieuwsbrief. Om meer te weten te komen over hoe formulieren in HTML te structureren, zie de Mozilla Web Docs-pagina over webformulierstructuur.
Zorg ervoor dat u uw wijzigingen opslaat in index.html, maak vervolgens een nieuw bestand in dezelfde map genaamd styles.css.
Open styles.css in uw teksteditor. Dit bestand bevat de stijlen die de browser zal toepassen op de inhoud van index.html. Voeg de volgende CSS-code toe aan uw styles.css-bestand:
De selectoren body en main creëren enkele initiële tekststijlen en lay-out voor de algehele pagina. De selecteur voor het form-element creëert de stijlen voor de algehele formuliercontainer en definieert vervolgens een CSS-grid bestaande uit twee kolommen van gelijke grootte met grid-template-columns: 1fr 1fr;. Vervolgens zorgt gap: 2rem voor een 2rem tussenruimte tussen elke rij en kolom in het grid. Ten slotte maakt de selecteur .full-width containers met deze klasse mogelijk om zich uit te strekken over de twee kolommen in plaats van in één kolom te blijven.
Sla je wijzigingen op in styles.css. Open vervolgens een webbrowser naar keuze. Selecteer het menu-item Bestand in de browser en selecteer vervolgens de optie Openen. Navigeer vervolgens naar je projectmap en laad je index.html-bestand in de browser. De volgende afbeelding toont hoe de pagina wordt weergegeven in de browser:
Het formulier wordt weergegeven in een witte doos op een lichtgrijze achtergrond. Elk formulierelement is verdeeld over het raster met de bovenste vier items die afwisselend tussen de twee kolommen staan en de laatste drie gestapeld, waarbij ze de twee kolommen overspannen. De standaardstijl van de formulierelementen is zoals ze verschijnen in Firefox; elke browser heeft een andere standaard voor het stylen van formulierelementen.
In dit gedeelte stel je de initiële HTML en CSS in die nodig zijn om met formulierelementen te werken. Je hebt ook geleerd dat elke browser de styling van deze elementen op een andere manier afhandelt. In het volgende gedeelte ga je de appearance-eigenschap gebruiken om de styling van formulierelementen gelijk te maken in alle browsers.
Resetten van Formulierstijlen met de appearance-Eigenschap
Elke browser behandelt de visuele vormgeving van formulierelementen op een andere manier. Vaak gaat de vormgeving van deze elementen verder dan de initiële mogelijkheden van CSS en volgt het de esthetiek van het besturingssysteem of de eigen ontwerptaal van de browser. Om consistente vormgeving voor alle browsers te creëren, zult u in deze sectie de eigenschap appearance en andere eigenschappen gebruiken om de standaard browserstijlen te verwijderen.
Om te beginnen opent u styles.css in uw teksteditor. Maak een nieuwe groepselecteur bestaande uit button, fieldset, input, legend, select en textarea. Voeg vervolgens binnen de selectorblok de eigenschap appearance toe en stel deze in op none, zoals aangegeven in onderstaande codeblok:
De appearance-eigenschap is de bedoelde manier om de speciale vormgeving van formulierelementen te verwijderen. Vanwege de ouderdom en implementatie van deze eigenschap vereisen de meeste browsers nog steeds een vendor-prefix die aan de eigenschapsnaam wordt toegevoegd. Een vendor-prefix is een speciale gecodeerde toevoeging die aan de eigenschapsnaam wordt toegevoegd als identificatie voor een specifieke browser. Voor Chrome, Safari en recente versies van Edge en Opera is dat prefix -webkit-. Firefox gebruikt het prefix -moz-.
Wanneer u werkt met leveranciersvoorvoegsels, is het belangrijk om de versies van het voorvoegsel van een eigenschap eerst te plaatsen en te eindigen met de niet-geprefixte versie. Op deze manier zullen oudere browsers die alleen de geprefixte eigenschap ondersteunen het voorvoegsel gebruiken, maar nieuwe browsers die zowel het voorvoegsel als de niet-geprefixte versies ondersteunen, zullen de niet-geprefixte standaardversie gebruiken. Voeg de gemarkeerde voorvoegsel appearance eigenschappen toe zoals geformatteerd in de volgende codeblok:
Sla uw wijzigingen op in styles.css en open vervolgens index.html in uw browser. De appearance eigenschappen hebben de versierde opmaak verwijderd en zijn overgegaan naar een eenvoudigere stijl, zoals weergegeven in de volgende afbeelding:
De appearance eigenschap staat alleen toe om de browser-specifieke opmaak te wijzigen. De grootste verandering die de waarde van de appearance: none eigenschap heeft gemaakt, was het volledig verwijderen van de selectievakjes en selectierondjes. Voor de rest van de formulierelementen zijn nog enkele eigenschappen nodig om de standaardstijlen volledig te verwijderen. De gemarkeerde CSS-eigenschappen in het volgende codeblok voegen de benodigde stijlen toe om de standaardstijlen te verwijderen:
Deze CSS verwijdert de achtergrondkleur en herstelt de parameters van het boxmodel. Niet al deze stijlen zijn nodig voor alle elementen, maar het is acceptabel om deze resetstijlen over alle elementen te groeperen.
Sla uw wijzigingen op in styles.css, vernieuw vervolgens index.html in de browser. De formulierelementen zijn visueel verdwenen van de pagina, zoals te zien is in de volgende afbeelding:
In deze sectie hebt u appearance en aanvullende eigenschappen gebruikt om de standaardstijlen volledig te verwijderen van de formulierelementen. U hebt ook leveranciersvoorvoegsels gebruikt om de eigenschap op de juiste manier toe te passen voor toekomstige browserversies. In de volgende sectie zult u beginnen met het aanpassen van de visuele vormgeving van de formulierelementen.
Het instellen van consistente stijlen over formulierelementen
Nu de standaardbrowserstijlen volledig zijn verwijderd, zult u een consistente aangepaste esthetiek toepassen op alle formulierelementen. Dit zal het maken van verschillende groepselectoren inhouden die specifieke formulierkenmerken targeten om de juiste stijlen te ontvangen.
Om te beginnen opent u styles.css in uw teksteditor. Maak vervolgens een groepselector bestaande uit input, select, en textarea. Voeg de gemarkeerde stijlen toe vanuit de volgende codeblok:
Deze stijlen voegen een 2px donkergrijze rand toe rond elk van de invoerelementen, samen met een witte achtergrond en afgeronde hoeken.
Vervolgens zult u stijlen toepassen voor de invoerelementen die tekst bevatten. U zult een attribuutselector gebruiken om aan te geven welke input-elementen moeten worden getarget op basis van hun type-attribuutwaarde. De gemarkeerde CSS in het volgende codeblok biedt de stijlen voor de benodigde elementen:
Deze stijlen passen een consistente lettergrootte en -familie toe op alle elementen. Het element <textarea> erft bijvoorbeeld niet de letterinstellingen van het body-element. De eigenschappen display, box-sizing, width en padding zorgen voor een consistente lay-out en structuur voor elk van deze gegevenselementen.
Sla uw wijzigingen op in styles.css en open vervolgens index.html in uw webbrowser. Zoals weergegeven in de volgende afbeelding, hebben de velden nu een dikkere donkergrijze rand eromheen en de tekst van het <select>-element is nu veel groter:
Vervolgens zijn er twee elementen die wat speciale opmaak nodig hebben naast de brede opmaak die u al hebt geschreven. De eerste is om meer hoogte te geven aan de textarea, en de tweede is om een aangepaste vervolgkeuzepijl toe te passen op het <select>-element.
Keer terug naar styles.css en voeg een selector voor het textarea-element toe. Binnen het selectorblok, maak een min-height-eigenschap ingesteld op een waarde van 10rem. Hierdoor wordt een groter initiële gebied gecreëerd voor de formuliergebruiker om tekst in te vullen. De gemarkeerde CSS in het volgende codeblok illustreert hoe dit is geschreven:
Na het toevoegen van de stijlen voor de textarea, is het volgende om een image-directory te maken. Dat kan worden gedaan door het volgende uit te voeren in uw opdrachtprompt vanuit dezelfde directory als uw index.html– en styles.css-bestanden:
Voer vervolgens de volgende curl-opdracht uit om de eerste afbeelding te downloaden waarmee je gaat werken naar de nieuwe images-map:
De afbeelding die je hebt gedownload is een SVG, wat een opmaaktaal is die vergelijkbaar is met HTML met als doel vormen te tekenen.
Om deze nieuwe afbeelding aan het <select>-element toe te voegen, ga terug naar styles.css. Maak vervolgens een select-element-selector aan en voeg een background-eigenschap toe met de gemarkeerde waarde uit het volgende codeblok:
Deze background-eigenschap laadt de afbeelding in de achtergrond van het <select>-element en herhaalt de afbeelding niet. Vervolgens wordt de afbeelding verticaal gecentreerd met center en wordt deze vanaf de rechterkant verschoven met right 0.75rem.
Sla je wijzigingen op in styles.css, keer dan terug naar je browser om de pagina te vernieuwen. De <textarea> is nu ongeveer twee keer zo hoog als zijn oorspronkelijke hoogte en het <select>-element heeft een blauwe naar beneden wijzende pijl aan de rechterkant. De volgende afbeelding illustreert hoe dit in de browser wordt weergegeven:
Gedurende deze sectie heb je een aangepaste esthetiek gecreëerd voor de invoerelementen van het formulier. Je hebt ook een achtergrond gemaakt voor het <select>-element om de standaardpijl te vervangen. In de volgende sectie zul je aangepaste keuzerondjes en selectievakjes maken en de geselecteerde status toepassen wanneer ze zijn aangevinkt.
Aanpassen van keuzerondjes en selectievakjes met de :checked Pseudoklasse
Nu je het basisuiterlijk van het formulier hebt gemaakt, is het tijd om die visuele stijl toe te passen op de interactieve input-elementen van een keuzerondje en selectievakje.
Begin met het openen van styles.css in je teksteditor. Je zult de input-elementen met een type-attribuut van radio of checkbox aanpassen om een gelijke hoogte- en breedtewaarde te hebben. Vervolgens zul je de keuzerondjes omzetten in cirkels. De gemarkeerde delen van de volgende codeblok laten zien hoe dit is opgemaakt:
De vertical-align-eigenschap is bedoeld voor het uitlijnen van inline tekstitems. Door dit in te stellen op middle, zullen de invoervelden in het midden van de tekst uitlijnen. Vervolgens zal de radio-input met een border-radius-eigenschap van 50% een cirkel creëren omdat de height en width gelijk zijn.
Sla je wijzigingen op in styles.css en open vervolgens index.html in je browser. De twee keuzerondjes en het selectievakje zijn nu groter en meer opvallend zoals weergegeven in de volgende afbeelding:
Als je zou interageren met de radioknoppen of het selectievakje, zou er niets zichtbaars gebeuren. De eigenschap appearance verwijdert ook de geselecteerde indicatoren voor deze typen invoer. Vervolgens zul je de :checked pseudo-klasse-selector gebruiken om stijlen toe te passen op het geselecteerde invoeritem.
Ga terug naar styles.css en maak een nieuwe selector voor de radioknopinvoer met een :checked pseudo-klasse. Voeg vervolgens binnen het selectieblok een background-image toe met een radial-gradient zodat een ingevulde stijl kan worden toegepast op geselecteerde radioknoppen. De gemarkeerde CSS uit de volgende codeblok laat zien hoe dit is opgemaakt:
De calc()-functie maakt het mogelijk om de eigenschap transparent in te stellen 1px na de kleurwaarde, waardoor er een solide blauwe cirkel binnen het invoerveld ontstaat.
Sla je wijzigingen op in styles.css en keer terug naar index.html in je browser. De radioknoppen hebben nu een solide blauwe cirkel omgeven door wit binnen het invoerveld. De volgende afbeelding laat de geselecteerde radioknop Ja zien:
Vervolgens zal het selectievakje een achtergrondafbeelding gebruiken om de :checked staat aan te geven, vergelijkbaar met de pijl van de <select>-dropdown.
Voer de volgende curl-opdracht uit om de afbeelding van het vinkje naar je images-directory te downloaden:
Nu je de afbeelding hebt gedownload en klaar voor gebruik, keer terug naar styles.css in je teksteditor.
Voeg vervolgens een input[type="checkbox"] selector toe met een :checked pseudo-klasse eraan gekoppeld. In het selectorblok voeg je een background eigenschap toe die het check.svg afbeelding laadt en schaalt zodat het in het vak past. De gemarkeerde CSS in het volgende codeblok geeft aan hoe dit is geschreven:
De waarden van de background eigenschap zorgen ervoor dat de controleafbeelding wordt gecentreerd in de container, niet wordt herhaald en proportioneel wordt verkleind met 75%.
Sla je wijzigingen op in styles.css en vernieuw de pagina in de browser. Wanneer je het selectievakje Ontvang onze nieuwsbrief selecteert, verschijnt er nu een vinkje binnenin, zoals geïllustreerd in de volgende afbeelding:
In deze sectie heb je aangepaste selectievakjes en invoervelden gemaakt en ervoor gezorgd dat ze hun geselecteerde status aanpassen door het gebruik van de :checked pseudo-klasse. In de volgende sectie ga je de <label> en <legend> elementen op de pagina vormgeven.
Speciale stijlen toevoegen aan labels en legendes
De volgende elementen die vorm moeten worden gegeven zijn de <label> en <legend> elementen in het formulier. Er worden twee verschillende stijlen gebruikt: een kleine labelstijl voor de selectievakjes en een grote labelstijl voor de overige elementen.
Open index.html in uw teksteditor. U zult een class-attribuut toevoegen aan elk <label> en <legend> met een waarde van large-label of small-label, zoals aangegeven in het volgende codeblok:
...
<form>
<div>
<label for="name" class="large-label">Name</label>
<input id="name" type="text" />
</div>
<div>
<label for="email" class="large-label">Email</label>
<input id="email" type="email" />
</div>
<div>
<label for="comp" class="large-label">Favorite CSS Compiler</label>
...
</div>
<div>
<fieldset>
<legend class="large-label">Are you familiar with CSS Grid?</legend>
<input type="radio" name="grid" id="yes" value="yes" />
<label for="yes" class="small-label">Yes</label>
<input type="radio" name="grid" id="no" value="no" />
<label for="no" class="small-label">No</label>
</fieldset>
</div>
<div class="full-width">
<label for="message" class="large-label">Message</label>
<textarea id="message"></textarea>
</div>
<div class="full-width">
<input type="checkbox" id="newsletter" />
<label for="newsletter" class="small-label">Receive our newsletter?</label>
</div>
...
</form>
...
Sla deze toevoegingen op naar index.html, open vervolgens styles.css in uw teksteditor.
In styles.css, voeg een .large-label klassenselector toe en voeg de volgende eigenschappen toe zoals aangegeven in het volgende codeblok:
Deze stijlen stellen de large-label-elementen in om groot en vetgedrukt te zijn met een lettergrootte van 1.5rem, wat gelijk is aan 24px. Dan zorgt de margin-bottom-eigenschap voor wat ruimte tussen het label en de bijbehorende elementen.
Sla deze wijziging op naar styles.css en open index.html in uw webbrowser. De labeltekst boven het gegevensinvoerveld zal groot en vetgedrukt zijn, zoals weergegeven in de volgende afbeelding:
Keer terug naar styles.css en maak een andere klassenselector voor .small-label. Aangezien dit de labels zijn die rechts van een selectievakje of een keuzerondje staan, zullen ze wat andere opmaak- en grootte-instellingen nodig hebben vergeleken met de .large-label. Voeg de gemarkeerde CSS toe aan uw styles.css vanuit het volgende codeblok:
De vertical-align: middle zal de tekst iets verplaatsen. Het lettertype is ingesteld op 1.25rem, wat gelijk is aan 20px, met een sans-serif lettertype. De margin-eigenschappen aan de linkerkant en rechterkant zorgen voor ruimte tussen de invoervelden en het label.
Sla je updates op in styles.css en vernieuw index.html in de browser. De labels naast de keuzerondjes en het selectievakje zijn nu groter en bieden meer ruimte, zoals weergegeven in de volgende afbeelding:
In deze sectie heb je stijlen gemaakt voor twee verschillende soorten labels, afhankelijk van hun relatie tot de bijbehorende invoerwaarde. De labels vallen nu meer op, waardoor ze gemakkelijker leesbaar zijn en de navigatie door het formulier verbeterd wordt. In de volgende sectie zal je voorbeeldgegevens opmaken door gebruik te maken van het placeholder-attribuut.
Placeholder-inhoud verstrekken met het ::placeholder-pseudo-element
Placeholder-inhoud op een input– of textarea-element geeft formuliergebruikers een visuele demonstratie van het soort informatie dat wordt gevraagd en hoe deze moet worden opgemaakt. Het placeholder-attribuut wordt toegevoegd aan de HTML met een beschrijvende waarde. Vervolgens maakt het ::placeholder-pseudo-element aanpassing van de weergave van de tekst mogelijk.
Om te beginnen met het maken van tijdelijke inhoud, opent u index.html in uw teksteditor. Voeg een placeholder-attribuut toe aan de naamtekst <input />, het e-mail <input /> en de <textarea>-elementen. De gemarkeerde HTML in de volgende codeblok geeft aan waar de placeholder moet worden toegevoegd en de waarde die moet worden gebruikt:
Sla uw wijzigingen op in index.html, open vervolgens de pagina in een webbrowser. Deze drie tekstinvoervelden hebben nu inhoud erin. Zodra deze tekstvelden zijn geselecteerd en inhoud is toegevoegd, wordt de placeholder-tekst door de browser verwijderd. De volgende afbeelding illustreert hoe de standaard placeholder-stijlen eruitzien in de browser:
Om de placeholder te stylen, opent u styles.css in uw teksteditor. Voeg een groepselector toe voor input::placeholder en textarea::placeholder. Zorg ervoor dat u dubbele dubbele punten tussen de selector en het pseudo-element gebruikt, omdat dit is hoe de browser het onderscheid maakt tussen een pseudo-klasse en een pseudo-element. De gemarkeerde CSS in het volgende codeblok laat zien hoe dit is geschreven:
Het enige wat opgemerkt moet worden, is dat Firefox een opacity-waarde van 1 vereist om de volledige kleurwaarde te hebben. Anders verlaagt Firefox de opacity, waardoor de tekstkleur wordt gedimd en afhankelijk van de kleurwaarde toegankelijke kleurcontrastproblemen ontstaan. Omdat dit een situatie is die alleen bij Firefox voorkomt, staat er een opmerking om het doel van de aanwezigheid van de opacity-eigenschap uit te leggen.
Sla uw wijzigingen op in styles.css en keer terug naar de browser om index.html te vernieuwen. De tijdelijke tekst heeft nu dezelfde blauwe kleur als die wordt gebruikt voor de vervolgkeuzepijl en geselecteerde toestanden voor de keuzerondje- en selectievakje. De volgende afbeelding illustreert hoe de browser de placeholder inhoud weergeeft:
Met dit gedeelte heeft u placeholder inhoud gemaakt voor tekstinvoervelden en deze gestileerd met behulp van het ::placeholder pseudo-element. In het volgende gedeelte zult u aangepaste stijlen maken voor formulier <button> elementen.
Interactieve knopstijlen maken
In webformulieren worden <button> elementen vaak gebruikt om een formulier te verzenden of opnieuw in te stellen. In index.html zijn er twee knoppen, één met een type van submit en de andere van reset. Beide zijn functioneel nuttig, maar voeren tegenovergestelde acties uit. De submit knop zal het formulier doorsturen naar een processor, terwijl de reset knop alle ingevoerde gegevens uit het formulier wist. Vanwege deze verschillende acties moeten de <button> elementen er ook visueel anders uitzien.
Om te beginnen, open styles.css in je teksteditor en maak een button elementselector aan. In deze selectorblok voeg je de stijlen toe die gedeeld worden tussen de submit en reset <button> elementen, zoals aangegeven in onderstaande codeblok:
De font zet beide knoppen op dezelfde lettertype en grootte. Vervolgens voegt de border-radius een afgeronde hoek toe aan beide knoppen. De cursor eigenschap verandert de stijl van de cursor naar een handstijl aanwijzer. Als laatste definieert de padding eigenschap de ruimte rondom de binnenkant van de knop.
Sla je wijzigingen op in styles.css en open dan index.html in je webbrowser. De tekst in de knop zal groter worden en de ruimte tussen de tekst zal visueel toenemen door de padding. De volgende afbeelding toont hoe de knoppen worden weergegeven in de browser:
Keer vervolgens terug naar styles.css om stijlen toe te voegen voor elk knop type door gebruik te maken van een attribuutselector die elk target. Voor de submit knop, voeg een blauwe background-color en wit tekstkleur toe. De reset knop krijgt een link-achtige onderstreping en een margin om meer ruimte tussen de knoppen toe te voegen. Voeg de aangegeven CSS toe vanuit onderstaand codeblok aan je styles.css bestand:
Sla deze toevoegingen op in styles.css en vernieuw vervolgens index.html in je teksteditor. De submit knop is nu opvallend blauw en wit, terwijl de reset knop gedempt onderstreepte tekst is, zoals weergegeven in de volgende afbeelding:
Het <button>-element heeft standaard geen :hover-status, dus voeg je deze nu toe aan je stijl. Een :hover-status is handig om cursorgebruikers visuele feedback te geven dat de cursor zich op de knoppen bevindt.
Om :hover-statussen te maken voor deze <button>-elementen, keer terug naar styles.css in je teksteditor. Stel de submit-knop’s achtergrondkleur in om te verdonkeren bij hover. Maak vervolgens de reset-knop de onderstreping te laten verdwijnen bij hover. De gemarkeerde HTML in de volgende codeblok geeft aan hoe je deze stijlen moet schrijven:
Sla je wijzigingen op in styles.css en keer dan terug naar de browser om index.html te vernieuwen. Zoals de volgende animatie laat zien, veranderen de <button>-elementen van stijl wanneer de muisaanwijzer erover zweeft:
In dit gedeelte heb je stijlen gemaakt voor de <button>-elementen om hun verschillen visueel opvallend te maken. Je hebt aangepast hoe de cursor eruitziet bij hover door de cursor-eigenschap aan te passen. Je hebt ook aangepaste stijlen gemaakt om toe te passen op elke knop om verdere visuele feedback te geven. In het laatste gedeelte zul je verdere visuele activiteitsfeedback geven door stijlen te maken wanneer een formulierelement momenteel in gebruik is met de :focus-pseudo-klasse.
Verduidelijking van de actieve formulievelden met :focus
Bij het invullen van een formulier is het belangrijk dat de gebruiker weet op welk veld ze momenteel werken. Dit kunt u bereiken met behulp van de pseudo-klasse :focus. Standaard gebruiken browsers een outline-eigenschap om aan te geven wanneer een element :focus heeft, maar soms kan dit geen opvallende indicator zijn, of het kan botsen met andere visuele aspecten van het ontwerp. In dit gedeelte gaat u een aangepaste :focus-status maken die overeenkomt met het esthetische van uw formulier.
Om te beginnen met werken met formulier veld :focus-staten, opent u styles.css in uw teksteditor. Maak een groepsselector voor input, select en textarea, allemaal met een :focus-pseudo-klasse, zoals aangegeven in de volgende codeblok:
Deze stijlen verwijderen de standaard outline-waarde van de browser en vervangen de stijl door een dikke blauwe lijn gemaakt met de box-shadow-eigenschap. De eerste drie waarden van de box-shadow zijn voor de plaatsing van de schaduw en de hoeveelheid vervaging. De vierde wordt de spreiding genoemd, die in dit geval een 4px lijn rond het gefocuste element creëert.
Vervolgens zullen de knoppen een iets andere focusstatus krijgen, aangezien de submit-knop dezelfde blauwe kleur heeft. Het doel en de bedoeling van een focusstatus is om opvallende aandacht te vestigen op het gefocuste element, dus u zult deze contouren op verschillende manieren onderscheiden.
Voeg een button:focus selector toe aan styles.css. In het selectorblok, schakel de standaard outline uit en voeg een box-shadow eigenschap toe. De plaatsing, vervaging en verspreidingswaarden blijven hetzelfde als de invoervelden, maar de kleur wordt zwart in plaats van blauw, zoals aangegeven in het volgende codeblok:
Sla uw wijzigingen op in styles.css en keer terug naar uw browser. Ververs index.html en begin op de Tab-toets te drukken om de focus tussen elk element in het formulier te verschuiven. De volgende animatie toont hoe de focusstijl wordt toegepast wanneer de focus verandert met de Tab-toets:
In dit gedeelte heeft u focusstatusstijlen gemaakt die duidelijke visuele feedback bieden wanneer een formulierelement de focus heeft. Deze visuele opmaak is nuttig voor gebruikers van muis-, aanraak- en toetsenbordinvoer.
Conclusie
Formulieren zijn een veelvoorkomend element in webdesign. Ze stellen gebruikers in staat om te interageren met apps, inhoud te doorzoeken en feedback te geven. In deze tutorial heb je een volledig uitgerust formulier gemaakt en gestileerd. Je hebt de standaardstijlen van de browser verwijderd met de appearance-eigenschap en een nieuwe aangepaste esthetiek gecreëerd voor verschillende elementen. Je hebt de :checked pseudo-klasse gebruikt om geselecteerde staten te maken voor keuzerondjes en selectievakjes. Vervolgens heb je placeholder-inhoud toegevoegd en de opmaak aangepast met het ::placeholder-pseudo-element. Nadat je aangepaste knopstijlen hebt gemaakt, heb je :focus-stijlen toegepast om waardevolle visuele interactie terug te geven aan de formuliergebruikers.
Als je meer CSS-tutorials wilt lezen, probeer dan de andere tutorials in de How To Style HTML with CSS-serie.
Source:
https://www.digitalocean.com/community/tutorials/how-to-style-common-form-elements-with-css