Den här kryssrutan erbjuder dig massor av gratis CSS-kryssrutor
Letar efter anpassade kryssrutan UI-stilar för din hemsida? Ta en titt på CSS Checkbox Library värd gratis på GitHub.
Detta massiva bibliotek stöder dussintals stilar för kryssrutor, som glidare, på / av mönster, cirklar och rutor bland många andra former.
Du få fullständig åtkomst till HTML / CSS-koden, så det är en vind att få det igång på din webbplats. För att inte tala om det är också helt öppen och tillgänglig för både personliga och kommersiella projekt.
För att komma igång kan du besöka GitHub repo och ladda ner alla filer lokalt till din maskin. Eller du kan installera biblioteket via npm.
Som standard, varje kryssruta stil kommer med sin egen klass. De checkboxes.min.css
stylesheet har allt du behöver, så om det finns med på din sida så är du helt klar.
Varje kryssruta stil stöder moderna webbläsare och de flesta äldre webbläsare, inklusive IE9+.
Arbetsflödet för det här biblioteket är kanske det enklaste jag någonsin sett. När du väl har stilarket lagt till din sida, bara gräva igenom alla stilar på huvuddemo och se vad som står ut.
Därifrån kan du välja vad som är bäst. Klicka på HTML-knappen visar en modal med källkoden för den kryssrutan. Nu, kopiera / klistra in den på din webbplats, ge det rätt namn / värde (om tillämpligt), och du är helt uppsatt!
Inga krångel, väldigt liten anpassning, och i princip behövs ingen kodningsförmåga.
Du märker alla rutor i rutan kommer i både ett ljust och mörkt tema, för större stöd. Det betyder att du inte borde ha problem med att hitta en kryssruta som passar din webbplats. Plus, du kan använd ytterligare klasser som .ckbx-small
eller .ckbx-xlarge
för att öka storleken.
Med 25 + olika stilar och många olika animationer, Jag måste säga att detta CSS Checkbox-bibliotek är imponerande. Perfekt för alla utvecklare på framsidan som vill spara tid i deras arbetsflöde och förbättra användargränssnittet för alla webbformulär.