Γεννήτρια Checkbox CSS

Τι είναι αυτό το εργαλείο;

Τα προεπιλεγμένα checkbox του περιηγητή φαίνονται διαφορετικά σε κάθε περιηγητή και είναι δύσκολο να επαναστυλαριστούν απευθείας, καθώς η ενσωματωμένη εμφάνισή τους σχεδιάζεται από το λειτουργικό σύστημα και όχι από απλό CSS. Η τυπική λύση είναι να κρύψετε οπτικά το εγγενές checkbox και να στυλάρετε ένα αδερφικό στοιχείο, καθοδηγούμενο από την κατάσταση :checked του checkbox — η είσοδος παραμένει πλήρως λειτουργική και προσβάσιμη, αλλάζει μόνο η εμφάνισή της.

Αυτό το εργαλείο χτίζει αυτό το μοτίβο για τρία συνηθισμένα στυλ checkbox: ένα στρογγυλεμένο κουτί με κινούμενο τικ, έναν διακόπτη εναλλαγής στυλ iOS, και έναν γεμάτο κύκλο (τύπου radio). Κάντε κλικ στο checkbox στην προεπισκόπηση για να δείτε την επιλεγμένη κατάσταση, προσαρμόστε μέγεθος και χρώμα έμφασης, μετά αντιγράψτε το CSS.

Πηγή: Selectors Level 4, W3C — η προδιαγραφή που ορίζει το ψευδο-στοιχείο :checked στο οποίο βασίζεται αυτή η τεχνική.

Γιατί να το χρησιμοποιήσετε;

• Ζωντανή, κλικαρίσιμη προεπισκόπηση — εναλλάξτε το checkbox για να δείτε ακριβώς πώς φαίνονται οι καταστάσεις επιλεγμένο και μη επιλεγμένο.
• Τρία διακριτά, ευρέως χρησιμοποιούμενα στυλ σε ένα εργαλείο: κουτί με τικ, διακόπτης εναλλαγής, και γεμάτος κύκλος.
• Το υποκείμενο στοιχείο παραμένει πραγματικό <input type="checkbox">, οπότε η πλοήγηση με πληκτρολόγιο, η υποβολή φόρμας και οι αναγνώστες οθόνης συνεχίζουν να λειτουργούν κανονικά.
• Προσαρμόσιμο μέγεθος και χρώμα έμφασης, παραγόμενα απευθείας στις τιμές CSS αντί να μένουν ως μεταβλητές προς συμπλήρωση.
• Δεν χρειάζεται γραμματοσειρά εικονιδίων, αρχείο SVG ή εικόνα — το τικ και το χερούλι σχεδιάζονται με απλά περιγράμματα CSS και ψευδο-στοιχεία.
• Δωρεάν, τρέχει στον περιηγητή σας, χωρίς εγγραφή.

Πώς χρησιμοποιείται

1. Επιλέξτε στυλ: στρογγυλεμένο τικ, διακόπτης εναλλαγής, ή γεμάτος κύκλος.
2. Σύρετε τον ολισθητή μεγέθους για να κλιμακώσετε το checkbox προς τα πάνω ή κάτω.
3. Επιλέξτε χρώμα έμφασης — αυτό γίνεται το χρώμα φόντου και περιγράμματος της επιλεγμένης κατάστασης.
4. Κάντε κλικ στο checkbox στο πλαίσιο προεπισκόπησης για να επιβεβαιώσετε ότι και οι δύο καταστάσεις, επιλεγμένη και μη, φαίνονται σωστές.
5. Αντιγράψτε το παραγόμενο CSS στο φύλλο στυλ σας και χρησιμοποιήστε το σε οποιοδήποτε <input type="checkbox"> τυλιγμένο με την ίδια σήμανση όπως η προεπισκόπηση.

Παράδειγμα

Είσοδος

Στυλ: στρογγυλεμένο τικ · Μέγεθος: 24px · Χρώμα: πορτοκαλί

Έξοδος

.css-checkbox .mark {
  width: 24px;
  height: 24px;
  border: 2px solid #f97316;
  border-radius: 5px;
}

.css-checkbox input:checked + .mark {
  background: #f97316;
}

Η είσοδος checkbox κρύβεται οπτικά· το ορατό κουτί είναι ένα αδερφικό <span> στυλαρισμένο με την κατάσταση :checked της εισόδου, με ένα μικρό περιστραμμένο περίγραμμα σχεδιασμένο ως το τικ μόλις επιλεγεί.

Γιατί να κρύψετε το εγγενές checkbox αντί να το αφαιρέσετε

Είναι δελεαστικό να παραλείψετε το πραγματικό <input> και να χτίσετε ένα checkbox καθαρά από ένα στυλαρισμένο <div> με χειριστή κλικ, αλλά αυτό χάνει δωρεάν την υποστήριξη πληκτρολογίου, την υποβολή φόρμας και τη σημασιολογία αναγνώστη οθόνης. Το μοτίβο που παράγει αυτό το εργαλείο κρατά το πραγματικό input checkbox στη σήμανση — απλώς κρυμμένο οπτικά με opacity: 0 και επανατοποθετημένο — ώστε ο περιηγητής να εξακολουθεί να το αντιμετωπίζει ως γνήσιο checkbox με κάθε τρόπο που έχει σημασία, ενώ ένα αδερφικό στοιχείο χειρίζεται το ορατό στυλ.

Τα τρία στυλ με μια ματιά

• Στρογγυλεμένο τικ: ένα οικείο μοτίβο τετραγώνου-με-τικ, το πιο συνηθισμένο για πεδία φόρμας, checkbox συμφωνίας και λίστες πολλαπλής επιλογής.
• Διακόπτης εναλλαγής: διαβάζεται ως στιγμιαία ρύθμιση on/off παρά ως πεδίο φόρμας — καλύτερο για προτιμήσεις και οθόνες ρυθμίσεων παρά για λίστες checkbox.
• Γεμάτος κύκλος: μια μινιμαλιστική εμφάνιση τύπου radio button, χρήσιμη όταν ένα τετράγωνο κουτί θα φαινόταν οπτικά βαρύ δίπλα σε γειτονικά στρογγυλεμένα στοιχεία UI.

Ταίριασμα με το υπόλοιπο UI σας

Το παραγόμενο χρώμα έμφασης επηρεάζει μόνο την επιλεγμένη κατάσταση — επιλέξτε ό,τι χρώμα επωνυμίας ή κουμπιού έχετε ώστε το checkbox να αισθάνεται συνεπές με το υπόλοιπο της σελίδας. Συνδυάστε το με το ίδιο border-radius που χρησιμοποιείται αλλού στο περιβάλλον για μια πιο συνεκτική εμφάνιση.

→ Δημιουργός Border Radius · Επιλογέας Χρώματος

Συχνές ερωτήσεις