Share
En av de mest kraftfulla och underutiliserade CSS-selektorerna är den allmänna syskonkombinationen: ~. I de kommande handledningarna kommer jag att gå över olika sätt att använda ~ att skapa komponenter som inte bara är visuellt tilltalande men också funktionella och användbara. Denna handledning kommer att omfatta formelement; radio, kryssrutan och vanliga ingångar.
Vi lär oss mycket: moderna CSS-väljare, kommer att ändras egendom, SVG stroke egenskaper, ingångsstatus och mycket mer!
En snabb ansvarsfriskrivning: Dessa CSS-effekter kan eller kanske inte fungerar i äldre webbläsare. Jag har testat dem i de senaste versionerna av Chrome, Firefox och Safari..
Jag använder Haml (en HTML-kompilator) och Sass (en CSS preprocessor) för att påskynda kodningsprocessen! Demonerna kommer att använda Haml medan någon inline-kod kommer att använda vanlig HTML.
Jag använder också den fantastiska AutoPrefixer istället för leverantörs prefix. Om du använder CodePen, var noga med att gå till pennens inställningar, klicka på CSS och välj AutoPrefixer.
Välj AutoPrefixer i dina penninställningarVi börjar med ett av de mest grundläggande formelementen: radionången. Det finns två huvudsakliga visuella tillstånd (kontrollerad och okontrollerad) samt två mellanliggande tillstånd (svep och klicka / aktivt klick är likadan utseende som markerat).
Det första steget är att ställa in vår HTML. Du behöver en ytterhölje och en inre behållare med två barn: a div innehållande ingångs- och visuella element och a märka för ingången. Jag gillar att använda en fieldset för den yttre behållaren. Se till att du lägger till ett ID för inmatningen som matchar för attribut på etiketten.
Nästa steg är att dölja standardinmatningen, lägga till viss grundläggande visuell styling och dölja de extra elementen som bara kommer att dyka upp när radionången väljs. Tanken är att göra inmatningen osynlig, men placera den på topp av de visuella elementen, så att klicka på radionången ser ut som att klicka på det visuella radionalternativet. Vi kan göra detta genom att ställa in position: relativ till .svg och position: absolut till ingången och sedan gömma inmatningen.
Notera: Du kan formatera det på något sätt du väljer. Jag valde en grundläggande cirkelstil som efterliknar standardradio, förutom att den är smalare.
Vi ställer in några färgvariabler med Sass; ett par gråfärger och en ljusblå för den valda radioen. Vi ställer också in en variabel $ p för vår standard-enhet-12px är ett fint tal eftersom det är delbart med ett stort antal olika nummer (1, 2, 3, 4, 6).
Jag lägger de viktigaste variablerna in i bädden direkt, men ytterligare styling kan hittas här eller genom att klicka på till CodePen-sidan, klicka på inställningar i övre högra hörnet och klicka på CSS fliken för att visa ytterligare stylesheets.
Vi har gjort den första cirkeln en ljusgrå och den andra en ljusblå, och döljer sedan den andra genom att ställa in transformera: skala (0). Senare animerar vi cirkeln tillbaka, så det är viktigt att ställa in skalan nu.
Efter att ha ställt upp allt detta måste vi bestämma de visuella stilerna för varje stat. För det här exemplet bestämde jag mig att på svävaren skulle den ljusgrå cirkeln bli en ljusblå; på klick, den blå cirkeln skala in och den grå bakgrunden blir vit och förblir så för kontrollerat tillstånd. Det enda sättet att ta bort det kontrollerade tillståndet från en radio är att klicka på en annan radio, i vilket fall blått och vitt helt enkelt skulle blekna.
Vi ställer in färgerna först och animerar sedan alla stater har färger. Det här är den tillde ~ kommer till hands. Den här generella syskonvalet (the syskonkombination) väljer det andra elementet så länge det föregås av det första elementet någonstans, och de delar en gemensam förälder. Vi använder inmatning: svep ~ div för att välja det visuella elementet när ingången svängs över.
Försök att klicka på den första radioen och sedan den andra. Du borde tydligt kunna se svep och aktiva / markerade tillstånd.
Det sista steget är att ställa in animationerna för varje stat. Nyckeln till att animera alla dessa olika tillstånd är att ställa in de obekanta övergångarna som standard och ställa in de markerade övergångarna när inmatningen klickas. Jag använder en ny CSS-egenskap som heter kommer att ändras för att låta webbläsaren veta vilka egenskaper jag ska animera.
Du kan också göra denna anpassade radioingång utan att använda en SVG. Inställningen är liknande:
CSS är nästan exakt densamma, förutom med något mer styling för de två div element som har ersatt SVG-cirklarna. I det här fallet använder vi n: te-of-typ (n) att välja de olika div elementen så att vi inte behöver ge dem en klass i HTML.
Med SVG-versionen finns det mer markup men mindre styling; med HTML-versionen är det tvärtom. Resultaten ser identiska ut, så försök vilken som passar dina kodningsinställningar!
Nästa formulärelement vi anpassar är rutan inmatning. Dess tillstånd liknar radioutgången: två huvudsakliga visuella tillstånd (kontrollerad och okontrollerad) och två mellanliggande tillstånd (svep och klicka / aktiv).
Inställningen ser mycket ut som radioingången, men använder linjer för att bilda kryssrutan istället för cirklar.
Linjerna i den första gruppen kommer att ha en ljusgrå färg och kommer inte att animeras; linjerna i den andra gruppen kommer att animera när inmatningen klickas.
Det finns också en extra div element; Vi använder detta för att skapa en klickseffekt där den ljusblå expanderar i bakgrunden. För att effekten skall fungera måste div vara en blå cirkel med större bredd och höjd än den aktuella kryssrutan, och den yttre behållaren måste ha överflöde: gömd; sätt så att cirkelns kanter inte dyker upp. Den runda div skulle ha transformera: skala (0) set, liknar radion.
Checkboxens mått (vänster) och cirkeldimensioner (höger)Formatera det igen enligt dina önskemål. Jag bestämde mig för att runda kanterna på kontrollen liksom alla hörn.
Nästa steg är att förbereda sig för animationerna. Effekterna liknar radion, förutom att istället för att en cirkel expanderar, ritar sig i. För denna animering måste vi utnyttja stroke-dashoffset på SVG-linjerna.
För att animera stroke-dashoffset, Vi behöver längden på varje rad. Jag skapade ett verktyg på CodePen för att beräkna längderna, men om du använder markeringen som jag redan skapat är den kortare linjens längd 6,708 och ju längre är 14,873. Vi använder detta värde för att ställa in båda stroke-dashoffset och stroke-dasharray. Detta är endast nödvändigt för det första kryssrutan (den andra uppsättningen linjer visas som standard i det ej markerade läget).
När inmatningen klickas ställer vi in stroke-dashoffset till 0, vilken (med en övergång) kommer att se ut som linjen är "ritad". Vi behöver också lägga till i de andra tillståndsändringarna från den anpassade radioen, inklusive bakgrundsändringarna på svävaren och cirkelskalan på klick.
Det sista steget är att lägga till i alla övergångar. Återigen ställer vi de obekanta övergångarna som standard och anger de markerade övergångarna på klick. På samma sätt som cirkeln som bleknade för radion, kommer vi att få kryssrutan tona ut när den inte är markerad.
Du kan också få samma effekt med några div-element istället för att använda en SVG; Markeringen är enklare men inte lika tydligt avgränsad. Den första tomma diven är den växande blå cirkeln, den andra är standardmarkeringen och den tredje är markeringen som animerar när den klickas.
Vi ska använda :innan och :efter som varje del av rutan, vilket förenklar markeringen, annars skulle du behöva fyra tomma element eller mer för att skapa de två kryssrutorna. Vi måste placera linjerna manuellt och rotera dem på plats, men du kan använda en enda transform för att både rotera och dra in dem.
Du kan också använda en kryssmarkeringsymbol istället för roterande div-element! Det är inte riktigt detsamma som de andra två visuellt, men det fungerar lika bra.
Notera: du behöver bara HTML-symbolen i de två sista div-elementen, men i demo nedan har jag inkluderat den i alla tre delarna så att jag kan inkludera den i upprepad loop.
Eftersom vi inte kan dra in symbolen, bleker den vita versionen in och ut på klicka. Kolla in alla tre versionerna nedan!
Den sista delen av denna handledning är den vanliga textinmatningen. Jag har inspirerat från Googles materialinmatning. Dessa ingångar har några olika tillstånd: standard, aktiv / fokus (när den blinkande markören är synlig) och en subtil svängare.
Inställningen är ännu mindre än de föregående två inmatningsformat. Vi har en fältuppsättning, ingången, en etikett och ett div-element för gränsen.
Nästa steg är att formatera inmatningen. Vi kommer inte att gömma inmatningen den här gången eftersom vi behöver det för att visa värdet. Vi skapar också en etikett som rör sig upp och ner när vi fokuserar på inmatningen. För att göra detta arbete måste vi placera etiketten exakt ovanpå ingången. Den div gränsen kommer att ha en :efter pseudoelement som drar upp på gränsen när inmatningen klickas; vi lägger en skala (0) på pseudoelementet för att förbereda det för animering.
Om du försöker klicka på demo-ingången ovan och börjar skriva, märker du att texten skriver ut ovanpå etiketten. Vi kommer att animera etiketten för att krympa och översätta upp på klick. Du kan använda helt transformer för att förhindra repainting istället för att använda textstorlek som jag gjorde, men jag hittade att använda det samt translateY gav mig en mycket mer exakt utseende animering. Vi tar också bort skalan på div s :efter för att göra ritningsanimationen.
Nu om du försöker klicka på demo-ingången ovan och börjar skriva igen, krymper etiketten och rör sig smidigt, men om du lämnar den skrivna texten i inmatningen och klickar på utsidan, flyttar etiketten nedåt igen och hindrar inmatningen. Vi kan använda JavaScript för att förhindra detta beteende, men vi kan också använda ett CSS-ingångstillstånd som heter :giltig.
Vi kan antingen lägga till nödvändig som ett tomt attribut till vår inmatning i HTML eller lägga till : krävs => sant till våra ingående attribut i Haml. Sedan lägger vi till :giltig till :fokus fastigheter i vår Sass / CSS. Detta lägger till ytterligare ett visuellt tillstånd för vår inmatning, och eftersom det är en enkel textinmatning är det enda giltiga tillståndet när det finns text inmatat.
Notera: Användning av en annan typ av inmatning, t.ex. en inmatning av e-post, kommer att orsaka att detta beteende bryts, eftersom e-postinmatningar har olika giltighetskrav.
Om du vill skapa egna inmatningar med hjälp av dessa tekniker, men du behöver mer visuell inspiration, kolla in användargränssatserna som finns tillgängliga med en Envato Elements-prenumeration:
UI-kits på Envato ElementsDet finns dussintals olika sätt att utnyttja den allmänna syskonväljaren som är visuell, funktionell eller båda. Det ger ett kraftfullt sätt att anpassa komponenter utan att behöva använda mer än bara CSS och HTML. Vi har täckt tre olika slags formelement i denna handledning; I nästa kommer vi utforska menyer och navigering. Gärna lämna en kommentar nedan om du har några frågor eller feedback!
Accentsconagua