Γρήγορη Συμβουλή: Εύκολα Πλαίσια Ελέγχου και Κουμπιά Επιλογής με CSS3

() translation by (you can also view the original English article)

Αναρωτηθήκατε ποτέ πώς να μορφοποιήσετε πλαίσια ελέγχου (checkboxes) και κουμπιά επιλογής (radio buttons), χωρίς τη χρήση Javascript; Χάρη στο CSS3 μπορείτε! Ορίστε αυτό που θα υλοποιήσουμε:

Αν ψάχνετε για γραφικά για να χρησιμοποιήσετε μαζί με τα γραφικά στοιχεία διεπαφής της φόρμας σας, ρίξτε μια ματιά στα διαθέσιμα UI kits στο Envato Elements. Διαφορετικά, πάρτε μια κούπα καφέ και ξεκινήστε αυτό το tutorial!

1. Καταλαβαίνοντας τη Διαδικασία

Προτεινόμενη Βιβλιογραφία: Οι 30 CSS Selectors που Πρέπει να Απομνημονεύσετε

Για εσάς που ήδη αισθάνεστε αυτοπεποίθηση για τις δυνατότητες σας στο CSS και θέλετε απλά μια μικρή ώθηση προς τη σωστή κατεύθυνση, ορίστε η πιο σημαντική γραμμή CSS σε όλοκληρο το tutorial:

1	input[type="checkbox"]:checked + label {
2
3	}

Τώρα, για εσάς που χρειάζεστε περισσότερη καθοδήγηση, μη φοβάστε, διαβάστε παρακάτω!

Εντάξει, πίσω στο θέμα μας. Τί θα κάνουμε ακριβώς; Χάρη στον ιδιαίτερα χρήσιμο :checked pseudo selector, μπορούμε να στοχεύσουμε ένα στοιχείο σύμφωνα με το αν η κατάσταση του είναι checked (ή unchecked). Μπορούμε ύστερα να χρησιμοποιήσουμε τον + adjacent sibling selector από το CSS2.1 για να στοχεύσουμε το στοιχείο που ακολουθεί αμέσως μετά το checkbox ή το radio, που στην περίπτωσή μας είναι το label.

2. Ορίζοντας την HTML μας

Τώρα, ξεκινάμε δημιουργώντας τα αρχεία HTML και CSS (ή με οποιονδήποτε τρόπο προτιμάτε να δημιουργείτε τα styles σας) και προχωραμε. Υποθέτω ότι γνωρίζετε πώς να το κάνετε αυτό, οπότε δε θα το δείξουμε εδώ.

Για να προχωρήσετε πιο γρήγορα, θα δείξω αυτήν την τεχνική μόνο σε ένα πλαίσιο ελέγχου (checkbox), αλλά η διαδικασία για τα κουμπιά επιλογής (radio buttons) είναι πανομοιότυπη, και περιλαμβάνεται στον πηγαίο κώδικα.

Εντάξει, ας ξεκινήσουμε! Ξεκινάμε δημιουργώντας το input checkbox, ακολουθούμενο από ένα label.

1	<input type="checkbox" />
2	<label>Styled Check Box</label>

Τώρα, σε περίπτωση που δεν ξέρετε πολλά για το στοιχείο <label>, πρέπει να συνδέσετε το input και το label για να μπορέσετε να επικοινωνήσετε με το input μέσω του label. Αυτό γίνεται χρησιμοποιώντας το, for="" και το ID του input.

1	<input type="checkbox" id="c1" name="cc" />
2	<label for="c1">Check Box 1</label>

Θα προσθέσω επίσης ένα <span> μέσα στο label, το οποίο είναι περισσότερο προσωπική προτίμηση παρά οτιδήποτε άλλο, αλλά όλα θα ξεκαθαρίσουν στο βήμα 3.

3. Αυτό Για Το Οποίο Είμαστε Εδώ: CSS

Εδώ ξεκινάει το διασκεδαστικό κομμάτι. Το πρώτο πράγμα που θα κάνουμε, και είναι η βάση όλου του tutorial, είναι να κρύψουμε το ίδιο το checkbox.

1	input[type="checkbox"] {
2	display:none;
3	}

Αφού έγινε αυτό, μπορούμε να μορφοποιήσουμε το label, αλλά πιο συγκεκριμένα το span μέσα στο label. Το κάνω με αυτήν τη σειρά για να έχω περισσότερο έλεγχο στην ακριβή τοποθέτηση του πλαισίου ελέγχου. Χωρίς αυτό, πιθανότατα θα χρησιμοποιούσατε μια εικόνα σαν φόντο απευθείας στο label, και η τοποθέτηση της μπορεί να καταστεί δύσκολη.

input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    background:url(check_radio_sheet.png) left top no-repeat;
}

Εντάξει, ας το εξηγήσω γρήγορα. Αρχικά, προσέξτε το φόντο. Έχω ένα μικρό sprite sheet για αυτά, έτσι το μόνο που έχω να κάνω είναι να ορίσω το background position σε αυτό το span. Το ίδιο το span έχει ακριβώς το ίδιο πλάτος και ύψος με κάθε "sprite" στο sprite sheet, κάνοντας εύκολο να ορίσουμε την κάθε κατάσταση (state).

Ορίστε το υπόλοιπο CSS, συγκεκριμένα για τη δική μου μορφοποίηση. Αυτό είναι καθαρά για αισθητικούς λόγους και συγκεκριμένο είτε για το γούστο μου είτε για το συγκριμένο σχεδιασμό.

input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-2px 10px 0 0;
    vertical-align:middle;
    background:url(check_radio_sheet.png) left top no-repeat;
    cursor:pointer;
}

4. Κάνοντάς το να Δουλέψει

Δεν έχει μείνει πολλή δουλειά, οπότε ας το ολοκληρώσουμε σιγά σιγά. Το τελευταίο πράγμα που θα χρειαστεί να κάνετε είναι να παρέχετε μια κατάσταση (state) για το στοιχείο όταν ή είσοδος είναι τσεκαρισμένη, και προαιρετικά επίσης μια για την κατάσταση hover. Αυτό είναι αρκετά απλό, ρίξτε μια ματιά!

input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-2px 10px 0 0;
    vertical-align:middle;
    background:url(check_radio_sheet.png) left top no-repeat;
    cursor:pointer;
}
input[type="checkbox"]:checked + label span {
    background:url(check_radio_sheet.png) -19px top no-repeat;
}

Παρατηρήστε ότι επειδή χρησιμοποίησα ένα sprite sheet, το μόνο που πρέπει να κάνω είναι αλλάξω το background position. Παρατηρήστε, επίσης, ότι το μόνο που έπρεπε να κάνω για να μορφοποιήσω το span του label, για την περίπτωση όπου 'τσεκαρέτε' ένα checkbox/radio button, ήταν να χρησιμοποίσω τον CSS3 pseudo selector :checked.

Γρήγορη Σημείωση για Υποστήριξη από Φυλλομετρητές

Οι Pseudo selectors έχουν εξαιρετική υποστήριξη από όλους τους φυλλομετρητές, αλλά τα γνωστά θέματα υπάρχουν και το fallback είναι αρκετά κομψό.

Can I use data for pseudo selectors — Δεδομένα Can I Use για γενικούς pseudo selectors

IE9 on Windows 7 — Fallback: IE9 σε Windows 7

Οι παλαιότεροι φυλλομετρητές σε κινητές συσκευές είναι ένα θέμα επίσης - η υποστήριξη του :checked είναι ασαφής. O Mobile Safari προ iOS 6 δεν το υποστηρίζει, για παράδειγμα.

Συμπέρασμα

Ωραία, έχουμε τελειώσει, έτσι; Ας το ελέγξουμε ξανά. Πρώτα η HTML:

1	<input type="checkbox" id="c1" name="cc" />
2	<label for="c1"><span></span>Check Box 1</label>

Φαίνεται να είναι ίδια με τη δική σας; Μην ξεχάσετε να προσθέσετε εκείνο το <span>! Όταν πειραματιστείτε με αυτό μόνοι σας, προτείνω να βρείτε καινούριους ή διαφορετικούς τρόπους να υλοποιήσετε αυτό το μέρος. Θα μου άρεσε να δω τί θα σκεφτείτε για να το κάνετε πιο αποτελεσματικό. Τώρα στο CSS:

input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-2px 10px 0 0;
    vertical-align:middle;
    background:url(check_radio_sheet.png) left top no-repeat;
    cursor:pointer;
}
input[type="checkbox"]:checked + label span {
    background:url(check_radio_sheet.png) -19px top no-repeat;
}

Όλα εδώ; Τέλεια. Έχετε υπόψιν ότι πολλή από αυτήν τη μορφοποίηση είναι συγκεκριμένα για το στυλ που δημιούργησα για τα demo αρχεία. Σας προτρέπω να δημιουργήσετε τα δικά σας, και να πειραματιστείτε με την τοποθέτηση και την παρουσίασή τους.

Συμπερασματικά, το πιο σημαντικό πράγμα που μπορείτε να κρατήσετε από αυτό είναι η πρώτη γραμμή CSS που έγραψα στην αρχή:

1	input[type="checkbox"]:checked + label {
2
3	}

Χρησιμοποιώντας αυτό, μπορείτε να δημιουργήσετε μια πληθώρα από διαφορετικά πράγματα. Οι δυνατότητες του :checked ξεπερνούν τα πλαίσια ελέγχου και τα κουμπιά επιλογής σε φόρμες, αλλά θα σας αφήσω να πειραματιστείτε με αυτό μόνοι σας. Μερικά πράγματα με τα οποία μπορείτε να πειραματιστείτε:

Προσθέστε ένα 2x spritesheet για οθόνες retina
Χρησιμοποιήστε SVG αντί για bitmap

Ελπίζω να σας άρεσε αυτό το σύντομο άρθρο και ελπίζω να πάρετε ότι μάθατε εδώ και να το επεκτείνετε ή να το βελτιώσετε!