Accentsconagua
Share
Heb je je ooit afgevraagd hoe je selectievakjes en keuzerondjes aankijkt, maar zonder JavaScript? Dankzij CSS3 kan dat! Dit is wat we gaan bouwen (Notitie: om deze toegankelijk te maken, bekijk ook deze tutorial):
Als u op zoek bent naar afbeeldingen om te gebruiken met uw formulier UI-elementen, bekijk dan de UI-sets die beschikbaar zijn bij Envato Elements. Neem anders een kop koffie en begin aan deze tutorial!
Aanbevolen lezing: De 30 CSS-kiezers die u moet onthouden
Voor degenen onder u die vertrouwen hebben in uw CSS-vaardigheden en gewoon een duwtje in de goede richting willen, hier is de belangrijkste regel van CSS in de gehele tutorial:
invoer [type = "checkbox"]: aangevinkt + label
Nu, voor degenen onder jullie die vinden dat je misschien meer richting nodig hebt, vrees niet, lees verder!
Oké, dus nu terug op onderwerp. Wat zullen we precies doen? Nou, vanwege het handige beetje CSS3 : aangevinkt pseudo-selector, we kunnen een element targeten op basis van de gecontroleerde (of niet-gecontroleerde) status. We kunnen dan de + aangrenzende sibling-selector van CSS2.1 om het element te targeten direct na het selectievakje of de radio, wat in ons geval het label is.
Nu beginnen we met het maken van onze HTML- en CSS-bestanden (of hoe u uw stijlen ook aanpakt) en gaan aan de slag. Ik neem aan dat je weet hoe je dat moet doen, dus we hoeven er niet in te duiken.
Om je op weg te helpen, zal ik deze techniek alleen demonstreren in een selectievakje, maar het proces voor keuzerondjes is identiek en wordt opgenomen in de bron.
Oké, laten we eigenlijk beginnen, zullen we? We beginnen met het aanmaken van onze checkbox-invoer, gevolgd door een label.
Nu, voor het geval u niet veel weet over de element, moet u de invoer en het label verbinden zodat u kunt communiceren met de invoer via het label. Dit wordt gedaan met behulp van, for = "" en de invoer-ID.
Ik zal ook een toevoegen binnenkant van het label, wat meer persoonlijke voorkeur heeft dan iets anders, maar alles zal duidelijk worden in stap 3.
Dit is waar het plezier begint. Het eerste wat we doen, wat de basis is voor deze hele tutorial, is het verbergen van het werkelijke selectievakje.
invoer [type = "checkbox"] weergave: geen;
Nu dat is gebeurd, kunnen we het label stylen, maar meer specifiek de spanwijdte binnenin het label. Ik doe het op deze manier om mezelf meer controle te geven over de exacte positie van het selectievakje. Zonder dit zou je waarschijnlijk direct een achtergrondafbeelding in het label gebruiken, en positionering kan moeilijk worden.
invoer [type = "checkbox"] weergave: geen; input [type = "checkbox"] + label span display: inline-block; width: 19px; hoogte: 19px; achtergrond: url (check_radio_sheet.png) left top no-repeat;
Oké, laat me dit snel uitleggen. Ten eerste, let op de achtergrond. Ik heb hier een klein sprite-blad voor, dus alles wat ik moet doen is de achtergrondpositie in deze reeks instellen. De overspanning zelf is de exacte breedte en hoogte van elke "sprite" in het blad, waardoor het gemakkelijk is om elke status te definiëren.
Onze sprite sheet Hier is de rest van de CSS, specifiek voor mijn styling. Dit is puur voor de esthetiek en specifiek voor mijn smaak of dit ontwerp.
invoer [type = "checkbox"] weergave: geen; input [type = "checkbox"] + label span display: inline-block; width: 19px; hoogte: 19px; marge: -2 px 10 px 0 0; vertical-align: middle; achtergrond: url (check_radio_sheet.png) left top no-repeat; cursor: wijzer;
Er is niet veel werk meer over, dus laten we dit inpakken. Het laatste dat u moet doen, is een voorwaarde voor het element opgeven wanneer de invoer wordt gecontroleerd en optioneel ook voor bij zweven. Dit is vrij eenvoudig, kijk maar!
invoer [type = "checkbox"] weergave: geen; input [type = "checkbox"] + label span display: inline-block; width: 19px; hoogte: 19px; marge: -2 px 10 px 0 0; vertical-align: middle; achtergrond: url (check_radio_sheet.png) left top no-repeat; cursor: wijzer; input [type = "checkbox"]: checked + label span background: url (check_radio_sheet.png) -19px top no-repeat;
Merk op dat omdat ik een sprite-sheet heb gebruikt, alles wat ik moet doen de achtergrondpositie verandert. Merk ook op dat alles wat ik moest doen om de spanwijdte van het label in te richten voor het controleren van een selectievakje / keuzerondje, de CSS3 was : aangevinkt pseudo-selector.
Pseudo-selectors hebben grote ondersteuning in alle browsers, maar de gebruikelijke restricties zijn van toepassing en de fallback is behoorlijk sierlijk:
Kan ik gegevens gebruiken voor algemene pseudo-selectors
Terugval: IE9 op Windows 7 Vroege mobiele browsers zijn ook een probleem - ondersteuning van : aangevinkt is onduidelijk. Mobile Safari pre iOS 6 niet steun het bijvoorbeeld.
Oke, dus we zijn klaar, toch? Laten we het gewoon even controleren. Eerst de HTML:
Ziet de jouwe er hetzelfde uit? Vergeet dat niet toe te voegen ! Wanneer ik hier zelf alleen mee experimenteer, raad ik u aan om nieuwe of andere manieren te vinden om dit onderdeel te doen. Ik zou graag zien wat je bedacht om het efficiënter te maken. Nu voor de CSS:
invoer [type = "checkbox"] weergave: geen; input [type = "checkbox"] + label span display: inline-block; width: 19px; hoogte: 19px; marge: -2 px 10 px 0 0; vertical-align: middle; achtergrond: url (check_radio_sheet.png) left top no-repeat; cursor: wijzer; input [type = "checkbox"]: checked + label span background: url (check_radio_sheet.png) -19px top no-repeat;
Alles aanwezig? Perfect. Houd er rekening mee dat veel van deze styling specifiek is voor de stijl die ik heb gemaakt voor de demobestanden. Ik moedig je aan om je eigen te maken en te experimenteren met plaatsing en presentatie.
Tot slot, het allerbelangrijkste dat je hieruit zou kunnen halen, is de allereerste regel CSS die ik helemaal bovenaan schreef:
invoer [type = "checkbox"]: aangevinkt + label
Hiermee kun je een hele reeks verschillende dingen maken. De mogelijkheden met : aangevinkt verder gaan dan selectievakjes en radio's voor gebruik in formulieren, maar ik laat je hier zelf mee experimenteren. Enkele dingen om mee te experimenteren:
Ik hoop dat je genoten hebt van dit korte artikel en ik hoop dat je neemt wat je hier ziet en het kunt uitbreiden of verbeteren!
Om af te sluiten hebben we een complete gids samengesteld om je te helpen bij het leren van CSS, of je nu net begint met de basis of als je meer geavanceerde CSS wilt verkennen.
