Mastering algemene siblingselecteurs aangepaste formulierelementen

Een van de krachtigste en onderbenutte CSS-kiezers is de algemene broer / zus-combinator: ~. In de komende tutorials zal ik verschillende manieren bespreken om te gebruiken ~ om componenten te maken die niet alleen visueel aantrekkelijk zijn, maar ook functioneel en nuttig. Deze tutorial behandelt de vormelementen; radio, checkbox en normale ingangen.

We zullen veel leren: moderne CSS selectors, de zal veranderen eigendom, SVG's beroerte eigenschappen, invoerstaten en nog veel meer!

Voor we beginnen…

Een snelle disclaimer: deze CSS-effecten werken mogelijk al dan niet in oudere browsers - ik heb ze getest in de nieuwste versies van Chrome, Firefox en Safari.

Ik zal Haml (een HTML-compiler) en Sass (een CSS-preprocessor) gebruiken om het codeerproces te versnellen! De demo's gebruiken Haml, terwijl elke inline-code gewone HTML gebruikt.

Ik gebruik ook de geweldige AutoPrefixer in plaats van de voorvoegsels van de leverancier. Als u CodePen gebruikt, moet u naar de instellingen van uw pen gaan, op CSS klikken en AutoPrefixer selecteren.

Selecteer AutoPrefixer in uw peninstellingen

Radio-ingangen

We beginnen met een van de meest elementaire vormelementen: de radio-invoer. Er zijn twee visuele hoofdstatussen (aangevinkt en uitgeschakeld) en twee tussenliggende toestanden (zweven en klikken / actief klikken lijkt qua uiterlijk op gecontroleerd).

SVG-versie

De eerste stap is het instellen van onze HTML. U hebt een hoofdbuitencontainer en een binnencontainer met twee kinderen nodig: div met de invoer en visuele elementen en a label voor de invoer. Ik gebruik graag een fieldset voor de buitenste container. Zorg ervoor dat u een ID toevoegt voor de invoer die overeenkomt met de voor attribuut op het etiket.

De volgende stap is het verbergen van de standaardinvoer, wat basisvisuele styling toevoegen en de extra elementen verbergen die alleen zichtbaar worden wanneer de radio-ingang is geselecteerd. Het idee is om de invoer onzichtbaar te maken, maar deze te positioneren top van de visuele elementen, zodat klikken op de radio-invoer lijkt op klikken op de visuele radiooptie. We kunnen dit doen door in te stellen positie: relatief naar .svg en positie: absoluut naar de invoer en dan de invoer verbergen.

Notitie: u kunt dit op elke gewenste manier opmaken. Ik koos voor een standaardcirkelstijl die de standaardradio nabootst, behalve dat deze vlakker is. 

We zullen een aantal kleurvariabelen instellen met behulp van Sass; een paar grijze kleuren en een helder blauw voor de geselecteerde radio. We zullen ook een variabele instellen $ p voor onze standaard eenheid-12px is een leuk getal omdat het deelbaar is door een groot aantal verschillende nummers (1, 2, 3, 4, 6).

Ik plaats de hoofdvariabelen direct in de inbedmassa, maar aanvullende styling vindt u hier of door door te klikken naar de CodePen-pagina, door te klikken op instellingen in de rechterbovenhoek en te klikken op de CSS tab om extra stylesheets te bekijken.

We hebben de eerste cirkel lichtgrijs gemaakt en de tweede cirkel helderblauw en vervolgens de tweede cirkel verborgen door in te stellen transformeren: schaal (0). Later zullen we de cirkel opnieuw animeren, dus het is belangrijk om de schaal nu in te stellen.

Nadat we dit alles hebben ingesteld, moeten we beslissen over de visuele stijlen voor elke staat. Voor dit voorbeeld heb ik besloten dat tijdens het zweven de lichtgrijze cirkel lichtblauw moet worden; bij klikken, schaalt de blauwe cirkel in en de grijze achtergrond wordt wit, en blijft dan op die manier voor de gecontroleerde staat. De enige manier om de gecontroleerde status van een radio te verwijderen, is door op een andere radio te klikken. In dat geval moeten het blauw en wit gewoon vervagen.

We stellen eerst de kleuren in en animeren vervolgens nadat alle statussen kleuren hebben. Dit is waar de tilde ~ komt van pas. Deze algemene sibling-selector (de broer of zus combinator) selecteert het tweede element zolang het ergens voorafgegaan wordt door het eerste element, en ze delen een gemeenschappelijke ouder. We gebruiken invoer: hover ~ div om het visuele element te selecteren wanneer de invoer over zweeft.

Probeer eerst op de eerste radio te klikken en vervolgens op de tweede - u zou duidelijk de status van zweven en actief / gecontroleerd kunnen zien.

De laatste stap is het instellen van de animaties voor elke staat. De sleutel tot het animeren van al deze verschillende statussen is om de niet-gecontroleerde overgangen standaard in te stellen en de gecontroleerde overgangen in te stellen wanneer op de invoer wordt geklikt. Ik gebruik een nieuwe CSS-eigenschap genaamd zal veranderen om de browser te laten weten welke eigenschappen ik zal animeren.

HTML-versie

U kunt deze aangepaste radio-invoer ook maken zonder een SVG te gebruiken. De opzet is vergelijkbaar:

De CSS is bijna precies hetzelfde, behalve met iets meer styling voor de twee div elementen die de SVG-kringen hebben vervangen. In dit geval gebruiken we n-of-type (n) om de verschillende div-elementen te selecteren, zodat we ze geen klasse in de HTML hoeven te geven.

Met de SVG-versie is er meer markup maar minder styling; met de HTML-versie is het andersom. De resultaten zien er identiek uit, dus probeer het programma dat het beste past bij uw coderingsvoorkeuren!

Checkbox ingangen

Het volgende formulierelement dat we willen aanpassen, is de checkbox-invoer. De toestanden zijn vergelijkbaar met die van de radio-ingang: twee visuele hoofdstatussen (aangevinkt en niet aangevinkt) en twee tussenliggende toestanden (zweven en klikken / actief).

SVG-versie

De opstelling lijkt veel op de radio-invoer, maar gebruikt lijnen om het vinkje in plaats van cirkels te vormen.

De lijnen in de eerste groep hebben een lichtgrijze kleur en worden niet geanimeerd; de lijnen in de tweede groep worden geactiveerd wanneer op de invoer wordt geklikt.

Er is ook een extra div element; we zullen dit gebruiken om een ​​klikeffect te creëren waarbij het heldere blauw uitloopt in de achtergrond. Om het effect te laten werken, moet de div een blauwe cirkel zijn met een grotere breedte en hoogte dan het werkelijke selectievakje, en de buitencontainer moet overloop verborgen; zo ingesteld dat de randen van de cirkel niet verschijnen. De ronde div zou moeten hebben transformeren: schaal (0) ingesteld, vergelijkbaar met de radio.

Selectievak afmetingen (links) en cirkel afmetingen (rechts)

Nogmaals, formatteer dit volgens uw voorkeuren. Ik besloot de randen van het vinkje en alle hoeken af ​​te ronden.

De volgende stap is om je voor te bereiden op de animaties. De effecten zijn vergelijkbaar met die van de radio, behalve dat in plaats van een cirkel wordt uitgevouwen, het vinkje wordt ingetrokken. Voor deze animatie moeten we gebruik maken van stroke-dashoffset op de SVG-regels.

Om te animeren stroke-dashoffset, we hebben de lengte van elke regel nodig. Ik heb een tool op CodePen gemaakt om de lengte te berekenen, maar als je het vinkje gebruikt dat ik al heb gemaakt, is de kortere lijnlengte 6.708 en hoe langer het is 14,873. We zullen deze waarde gebruiken om beide in te stellen stroke-dashoffset en stroke-dasharray. Dit is alleen nodig voor het eerste vinkje (de tweede reeks regels wordt standaard weergegeven in de niet-gecontroleerde staat).

Wanneer op de invoer wordt geklikt, stellen we de stroke-dashoffset naar 0, welke (met een overgang) eruit zal zien als de lijn "getekend" is. We moeten ook de andere toestandswijzigingen van de aangepaste radio toevoegen, inclusief de achtergrondwijzigingen bij zweven en de cirkelschaal bij klikken.

De laatste stap is om alle overgangen toe te voegen. Nogmaals, we zullen de ongecontroleerde overgangen standaard instellen en de aangevinkte overgangen bij klikken instellen. Op dezelfde manier als de cirkel die vervaagt voor de radio, zullen we het vinkje laten vervagen als het niet is aangevinkt.

HTML-versie

Je kunt hetzelfde effect ook krijgen met een paar div-elementen in plaats van een SVG te gebruiken; de opmaak is eenvoudiger, maar niet zo duidelijk afgebakend. De eerste lege div is de expanderende blauwe cirkel, de tweede is het standaard vinkje en de derde is het vinkje dat wordt geanimeerd wanneer erop wordt geklikt.

We zullen gebruiken :voor en :na als elk onderdeel van het vinkje, wat de opmaak vereenvoudigt, anders hebt u vier lege elementen of meer nodig om de twee vinkjes te maken. We moeten de lijnen handmatig positioneren en ze op hun plaats draaien, maar je kunt een enkele transformatie gebruiken om ze zowel te roteren als in te tekenen.

Symbool versie

U kunt ook een vinkje gebruiken in plaats van roterende div-elementen! Het is niet helemaal hetzelfde als de andere twee visueel, maar het werkt net zo goed.

Notitie: je hebt alleen het HTML-symbool nodig in de laatste twee div-elementen, maar in de onderstaande demo heb ik het in alle drie de div's opgenomen, zodat ik het in de herhaalde lus kan opnemen.

Omdat we het symbool niet kunnen tekenen, vervaagt de witte versie in en uit bij klikken. Bekijk alle drie de versies hieronder!

Regelmatige ingangen

Het laatste deel van deze tutorial is de normale tekstinvoer. Ik heb inspiratie gehaald uit de materiële lijningangen van Google. Deze ingangen hebben een aantal verschillende toestanden: standaard, actief / focus (wanneer de knipperende cursor zichtbaar is) en een subtiele zweeftekst.

De setup is nog minimaler dan de vorige twee invoerstijlen. We hebben een veldset, de invoer, een label en een div-element voor de rand.

De volgende stap is het stylen van de invoer. We zullen de input deze keer niet verbergen, omdat we het nodig hebben om de waarde te laten zien. We gaan ook een label maken dat op en neer beweegt wanneer we ons concentreren op de invoer. Om dit te laten werken, moeten we het label precies bovenop de invoer plaatsen. De div-grens heeft een :na pseudo-element dat over de rand tekent wanneer op de invoer wordt geklikt; we zullen een schaal (0) op het pseudo-element om het voor te bereiden op animatie.

Als je hierboven op de demo-ingang klikt en begint te typen, zul je merken dat de tekst bovenaan het label typt. We animeren het label om te verkleinen en vertalen op klik. U kunt volledig transformaties gebruiken om opnieuw schilderen te voorkomen, in plaats van te gebruiken lettertypegrootte zoals ik deed, maar ik merkte dat ik het ook zo goed kon gebruiken translateY gaf me een veel preciezer ogende animatie. We zullen ook de schaal op de div's verwijderen :na om de tekenanimatie te maken.

Als u nu op de demo-ingang hierboven klikt en opnieuw begint te typen, krimpt het label en beweegt het vloeiend omhoog, maar als u de getypte tekst in de invoer laat staan ​​en naar buiten klikt, gaat het label weer naar beneden, waardoor de invoer wordt belemmerd. We kunnen JavaScript gebruiken om dit gedrag te voorkomen, maar we kunnen ook een CSS-invoerstatus gebruiken genaamd :Geldig.

We kunnen toevoegen verplicht als een leeg kenmerk voor onze invoer in HTML of toevoegen : required => true naar onze invoerattributen in Haml. Dan voegen we toe :Geldig naar de :focus eigenschappen in onze Sass / CSS. Dit voegt een extra visuele status toe aan onze invoer en aangezien het een eenvoudige tekstinvoer is, is de enige geldige status wanneer er tekst is ingevoerd. 

Notitie: als u een ander soort invoer gebruikt, zoals een e-mailinvoer, kan dit gedrag worden verbroken, omdat e-mailinvoeringen verschillende geldigheidsvereisten hebben.

Inspiratie

Als je met deze technieken je eigen inputs wilt maken, maar je hebt meer visuele inspiratie nodig, bekijk dan de UI-kits die beschikbaar zijn met een Envato Elements-abonnement:

UI-kits op Envato Elements

Conclusie

Er zijn tientallen verschillende manieren om de algemene sibling-selector te gebruiken die visueel, functioneel of beide is. Het biedt een krachtige manier om componenten aan te passen zonder meer dan alleen CSS en HTML te hoeven gebruiken. We hebben drie verschillende soorten formulierelementen behandeld in deze zelfstudie; in de volgende zullen we menu's en navigatie verkennen. Voel je vrij om een ​​reactie hieronder te plaatsen als je vragen of feedback hebt!