Accentsconagua
Share
Någonsin undrat hur man stryker kryssrutor och radioknappar men utan JavaScript? Tack vare CSS3 kan du! Här är vad vi ska bygga (notera: för att lära sig hur man gör dem tillgängliga, kolla även in denna handledning):
Om du letar efter lite grafik som ska användas med dina formulär-UI-element, ta en titt på användargränssnittet som finns tillgängliga från Envato Elements. Annars, ta en kopp kaffe och börja med denna handledning!
Rekommenderad läsning: De 30 CSS Selectors du måste memorera
För dig som är säker på dina CSS förmågor redan och vill bara ha en knuff i rätt riktning, här är den viktigaste raden av CSS i hela handledningen:
input [type = "checkbox"]: markerad + etikett
Nu, för de av er som känner att du kanske behöver mer riktning, frukta inte, läs vidare!
Okej, så åter på ämnet nu. Vad ska vi göra? Tja, på grund av CSS3s smutsiga lilla :kontrollerade pseudo-väljare, kan vi rikta in ett element baserat på dess kontrollerade status (eller ej markerad). Vi kan då använda + närliggande syskonväljare från CSS2.1 för att rikta in elementet direkt efter kryssrutan eller radioen, vilket i vårt fall är etiketten.
Nu börjar vi med att skapa våra HTML- och CSS-filer (eller hur du föredrar att hantera dina stilar) och komma igång. Jag antar att du vet hur man gör det, så vi behöver inte komma in i det.
För att få dig på väg, visar jag bara den här tekniken i en kryssruta, men processen för radioknappar är identisk och ingår i källan.
Okej, låt oss faktiskt börja då ska vi? Vi börjar med att skapa vår checkbox-inmatning, följt av en etikett.
Nu, bara om du inte vet mycket om element måste du ansluta ingången och etiketten för att du ska kunna interagera med inmatningen genom etiketten. Detta görs genom att använda, för = "" och ingångens ID.
Jag lägger också till en inuti etiketten, vilket är mer personlig preferens än någonting annat, men allt kommer att bli tydligt i steg 3.
Det är här där roligt börjar. Första sak som vi gör, som ligger till grund för hela denna handledning, är att gömma själva kryssrutan.
input [typ = "checkbox"] display: none;
Nu när det är klart kan vi stämpla etiketten, men mer specifikt spänningen inuti etiketten. Jag gör det här för att ge mig mer kontroll över den exakta positionen i kryssrutan. Utan det skulle du förmodligen använda en bakgrundsbild i etiketten direkt, och positionering kan bli svår.
input [typ = "checkbox"] display: none; inmatning [typ = "checkbox"] + etikett spänning display: inline-block; bredd: 19px; höjd: 19px; bakgrund: url (check_radio_sheet.png) left top no-repeat;
Okej, låt mig förklara det här snabbt. Först av, observera bakgrunden. Jag har ett litet spritark för dessa, så allt jag behöver göra är att ställa in bakgrundspositionen på denna spänn. Spännvidden är den exakta bredden och höjden på varje "sprite" i arket, vilket gör det enkelt att definiera varje stat.
Vårt spritblad Här är resten av CSS, som är specifik för min styling. Detta är rent för estetik och specifikt för antingen min smak eller denna design.
input [typ = "checkbox"] display: none; inmatning [typ = "checkbox"] + etikett spänning display: inline-block; bredd: 19px; höjd: 19px; marginal: -2px 10px 0 0; vertikal-align: mitten; bakgrund: url (check_radio_sheet.png) left top no-repeat; markören: pointer;
Det finns inte så mycket arbete kvar, så låt oss få det här inslagna. Det sista du behöver göra är att ange en del för elementet när ingången är markerad, och eventuellt även för svängning. Det här är ganska enkelt, ta en titt!
input [typ = "checkbox"] display: none; inmatning [typ = "checkbox"] + etikett spänning display: inline-block; bredd: 19px; höjd: 19px; marginal: -2px 10px 0 0; vertikal-align: mitten; bakgrund: url (check_radio_sheet.png) left top no-repeat; markören: pointer; inmatning [typ = "kryssruta"]: kontrollerad + etikett spänning bakgrund: url (check_radio_sheet.png) -19px top no-repeat;
Observera att eftersom jag använde ett sprite-ark är allt jag behöver göra att ändra bakgrundspositionen. Observera också att allt jag behövde göra för att stämpla etikettens spänning för när du "checkar" en kryssruta / radioknapp, använd CSS3 :kontrollerade pseudo väljare.
Pseudo-selektorer har bra stöd över alla webbläsare, men de vanliga grunderna gäller, och fallbacken är ganska graciös:
Kan jag använda data för allmänna pseudo-selektorer
Fallback: IE9 på Windows 7 Tidiga mobila webbläsare är också ett problem - stöd för :kontrollerade är oklart. Mobile Safari före iOS 6 inte stödja det, till exempel.
Okej, så är vi klara, eller hur? Nåväl, låt oss bara dubbelkontrollera. Först HTML:
Ser din likadant ut? Glöm inte att lägga till i det ! När jag experimenterar med det här på egen hand, föreslår jag starkt att hitta nya eller olika sätt att göra den här delen. Jag skulle gärna se vad du gör för att göra det mer effektivt. Nu för CSS:
input [typ = "checkbox"] display: none; inmatning [typ = "checkbox"] + etikett spänning display: inline-block; bredd: 19px; höjd: 19px; marginal: -2px 10px 0 0; vertikal-align: mitten; bakgrund: url (check_radio_sheet.png) left top no-repeat; markören: pointer; inmatning [typ = "kryssruta"]: kontrollerad + etikett spänning bakgrund: url (check_radio_sheet.png) -19px top no-repeat;
Allting närvarande? Perfekt. Tänk på att mycket av denna stil är specifik för den stil jag skapade för demofilerna. Jag uppmuntrar dig att skapa din egen och experimentera med placering och presentation.
Sammanfattningsvis är det viktigaste du kan bära bort från detta den allra första raden av CSS skrev jag högst upp:
input [type = "checkbox"]: markerad + etikett
Med det kan du skapa ett helt annat sätt. Möjligheterna med :kontrollerade gå utöver kryssrutor och radioapparater för användning i blanketter, men jag låter dig experimentera med det själv. Några saker att experimentera med:
Jag hoppas att du haft den här korta artikeln och jag hoppas du tar det du ser här och utökar eller förbättrar det!
För att avsluta har vi byggt en komplett guide för att hjälpa dig att lära dig CSS, oavsett om du bara har börjat med grunderna eller vill utforska mer avancerad CSS.
