Δημιουργός CSS Διακόπτη

Ρυθμίστε τα χειριστήρια για να σχεδιάσετε έναν διακόπτη toggle, κάντε κλικ στην ζωντανή προεπισκόπηση για να δείτε την κίνηση, και αντιγράψτε το έτοιμο HTML και CSS. Ορίστε πλάτος, ύψος, χρώματα track για off/on, χρώμα thumb, στρογγύλεμα γωνιών και ταχύτητα μετάβασης — το αποτέλεσμα είναι ένας τυπικός, προσβάσιμος διακόπτης με βάση checkbox, όχι απλώς ένα διακοσμητικό σχήμα.

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

Ένας CSS διακόπτης toggle είναι ένα checkbox στυλιζαρισμένο ώστε να μοιάζει και να συμπεριφέρεται σαν φυσικός διακόπτης on/off — ένα οβάλ track με έναν κυκλικό thumb που γλιστράει από τη μια πλευρά στην άλλη. Στην πραγματικότητα παραμένει ένα κανονικό checkbox input, κάτι που έχει σημασία: διατηρεί το στοιχείο προσβάσιμο μέσω πληκτρολογίου και χρησιμοποιήσιμο με screen readers και υποβολές φορμών, σε αντίθεση με έναν διακόπτη φτιαγμένο αποκλειστικά από clickable div.

Αυτό το εργαλείο κατασκευάζει αυτό το μοτίβο για εσάς: ένα κρυφό checkbox, ένα track που αλλάζει χρώμα βάσει του :checked, και έναν thumb που γλιστράει με CSS transform. Ρυθμίστε τα sliders και τους επιλογείς χρωμάτων, κάντε κλικ στην προεπισκόπηση για να δοκιμάσετε την πραγματική κίνηση toggle, και αντιγράψτε τόσο το CSS όσο και το ελάχιστο HTML markup από το οποίο εξαρτάται.

Πηγή: WAI-ARIA Authoring Practices, W3C — συνιστά ένα πραγματικό checkbox input ως προσβάσιμη βάση για ένα στοιχείο switch, γι' αυτό και το αποτέλεσμα αυτού του δημιουργού διατηρεί το υποκείμενο στοιχείο input.

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

Η προεπισκόπηση είναι ένας πραγματικός, clickable διακόπτης — όχι στατική εικόνα — έτσι μπορείτε να δοκιμάσετε την ακριβή κίνηση πριν τη χρησιμοποιήσετε.
Παράγει τόσο το CSS όσο και την προσβάσιμη δομή HTML (checkbox input + label) από την οποία εξαρτάται το CSS.
Πλήρης έλεγχος πλάτους/ύψους track, χρώματος off, χρώματος on, χρώματος thumb, στρογγυλέματος γωνιών και ταχύτητας μετάβασης.
Χρησιμοποιεί το τυπικό μοτίβο checkbox + επιλογέα :checked, οπότε ο διακόπτης παραμένει πλοηγήσιμος με πληκτρολόγιο και λειτουργεί μέσα σε πραγματικές φόρμες.
Λειτουργεί εξ ολοκλήρου στον browser σας — τίποτα από όσα ρυθμίζετε δεν ανεβαίνει πουθενά.
Δωρεάν, χωρίς εγγραφή, λειτουργεί σε κινητά.

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

Ορίστε πλάτος και ύψος για να καθορίσετε το μέγεθος του track — ο thumb προσαρμόζεται αυτόματα ώστε να χωράει μέσα με λίγο padding.
Επιλέξτε το χρώμα κατάστασης off για την προεπιλεγμένη (μη επιλεγμένη) εμφάνιση του track, και το χρώμα κατάστασης on για όταν είναι ενεργοποιημένο.
Επιλέξτε ένα χρώμα thumb — το λευκό ή ένα ανοιχτό ουδέτερο συνήθως δίνει την ισχυρότερη αντίθεση με το track.
Ορίστε την ακτίνα γωνίας στο 50% για έναν κλασικό οβάλ διακόπτη, ή χαμηλώστε την για ένα ελαφρώς στρογγυλεμένο ορθογώνιο.
Ρυθμίστε την ταχύτητα μετάβασης για να ελέγξετε πόσο γρήγορα γλιστράει ο thumb και ξεθωριάζει το χρώμα του track μεταξύ των καταστάσεων.
Κάντε κλικ στον διακόπτη προεπισκόπησης για να επιβεβαιώσετε ότι η κίνηση φαίνεται σωστή, και αντιγράψτε το CSS και το HTML στο project σας.

Παράδειγμα

Είσοδος

Πλάτος: 52px · Ύψος: 28px · Χρώμα off: #cbd5e1 · Χρώμα on: #ea580c · Ακτίνα: 50% · Ταχύτητα: 200ms

Έξοδος

.switch input:checked ~ .track { background-color: #ea580c; }
.switch input:checked ~ .track .thumb { transform: translateX(24px); }

Ο πυρήνας του μοτίβου: η κατάσταση :checked του checkbox, σε συνδυασμό με τον γενικό επιλογέα αδελφού στοιχείου (~), καθορίζει τόσο το χρώμα φόντου του track όσο και την απόσταση ολίσθησης του thumb.

Γιατί ένα checkbox αντί για ένα div με click handler

Είναι δελεαστικό να φτιάξετε έναν διακόπτη από δύο στοιχεία <div> και λίγο JavaScript που αλλάζει μια κλάση με κλικ, αλλά αυτή η προσέγγιση συνήθως χαλάει την πλοήγηση με πληκτρολόγιο, τις ανακοινώσεις screen reader και την υποβολή φορμών — ένα πραγματικό checkbox χειρίζεται και τα τρία δωρεάν. Το μοτίβο που παράγει αυτό το εργαλείο διατηρεί το <input type="checkbox"> ως το πραγματικό διαδραστικό στοιχείο (οπτικά κρυμμένο αλλά ακόμα εστιάσιμο), και χρησιμοποιεί καθαρό CSS — καθόλου JavaScript — για να στυλάρει το track και τον thumb βάσει της εγγενούς κατάστασης :checked του checkbox.

Συνηθισμένα στιλ διακοπτών

Κλασικός οβάλ διακόπτης: ακτίνα γωνίας στο 50%, μέτριο μέγεθος (48–56px πλάτος), σαφής αλλαγή χρώματος μεταξύ on/off.
Διακόπτης πάνελ ρυθμίσεων: μικρότερο μέγεθος (36–44px πλάτος), απαλό χρώμα off (ανοιχτό γκρι) σε αντίθεση με μια κατάσταση on με χρώμα brand.
Ελαφρώς στρογγυλεμένος διακόπτης: ακτίνα γωνίας γύρω στο 20–30% αντί για πλήρες οβάλ, για μια πιο ορθογώνια, εμφάνιση εφαρμογής.
Γρήγορος, ζωηρός διακόπτης: ταχύτητα μετάβασης στα 100–150ms δίνει αίσθηση άμεσης απόκρισης.
Αργός, μελετημένος διακόπτης: ταχύτητα μετάβασης στα 300–400ms διαβάζεται ως πιο ομαλή και εκλεπτυσμένη, χρήσιμη για έναν μοναδικό εμφανή διακόπτη ρυθμίσεων.

Συνδυασμός με άλλα εργαλεία CSS

Το παραγόμενο track και thumb χρησιμοποιούν ήδη border-radius από κάτω, οπότε αν θέλετε μια τετράγωνη ή διαφορετικά στρογγυλεμένη παραλλαγή πέρα από όσα προσφέρει το slider, ο Δημιουργός Ακτίνας Γωνίας σας επιτρέπει να ρυθμίσετε κάθε γωνία ξεχωριστά πριν επικολλήσετε την τιμή. Ο Δημιουργός Box Shadow είναι χρήσιμος για να προσθέσετε μια απαλή σκιά στον thumb για επιπλέον βάθος.

→ Δημιουργός Border Radius · Δημιουργός Box Shadow

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

Γιατί το αποτέλεσμα περιλαμβάνει HTML, όχι μόνο CSS;

Ένας διακόπτης toggle δεν είναι καθαρά οπτικός — εξαρτάται από ένα πραγματικό <input type="checkbox"> τυλιγμένο σε ένα <label>, συν τα στοιχεία track και thumb που στοχεύει το CSS. Χωρίς αυτή την ακριβή δομή, οι επιλογείς βάσει :checked στο παραγόμενο CSS δεν θα έχουν τίποτα να προσαρτηθούν, γι' αυτό αντιγράφονται μαζί.

Είναι προσβάσιμος αυτός ο διακόπτης;

Ναι — επειδή το διαδραστικό στοιχείο είναι ένα πραγματικό checkbox (απλώς οπτικά κρυμμένο με μια τεχνική που το διατηρεί στο accessibility tree, όχι display:none), παραμένει εστιάσιμο με Tab, εναλλάξιμο με Space ή Enter, και ανακοινώνεται σωστά από screen readers ως checkbox στην τρέχουσα κατάστασή του.

Μπορώ να το χρησιμοποιήσω μέσα σε πραγματική φόρμα HTML;

Ναι. Εφόσον το υποκείμενο στοιχείο είναι ένα τυπικό checkbox input, μπορείτε να του δώσετε ένα attribute name και value και θα υποβάλλεται όπως κάθε άλλο checkbox — οι επιλεγμένοι διακόπτες στέλνουν την τιμή τους, οι μη επιλεγμένοι παραλείπονται, ακριβώς όπως ένα κανονικό checkbox.

Γιατί ο thumb κινείται με transform αντί να αλλάζει τη θέση left;

Η κίνηση transform: translateX() χειρίζεται από τον compositor του browser και παραμένει ομαλή ακόμα και σε συσκευές χαμηλότερης απόδοσης, ενώ η κίνηση του left ενεργοποιεί επανυπολογισμό διάταξης σε κάθε καρέ. Το παραγόμενο CSS χρησιμοποιεί πάντα transform για τον ίδιο λόγο.

Τι ελέγχει πραγματικά το slider της ακτίνας γωνίας;

Κλιμακώνει τόσο το στρογγύλεμα των γωνιών του track όσο και του thumb μαζί, αναλογικά με το ύψος του track. Στο 50% παίρνετε ένα πλήρως στρογγυλεμένο οβάλ με κυκλικό thumb· χαμηλότερες τιμές διατηρούν το σχήμα πιο ορθογώνιο για έναν πιο τετράγωνο διακόπτη τύπου εφαρμογής.