Πώς να σχεδιάσετε ένα σημάδι επιλογής/τις με χρήση CSS

'στοιχείο δοχείου με ' ταυτότητα 'ή ένα ' τάξη ”:

< div ταυτότητα = 'σημάδι ελέγχου' >< / div >

Στην παραπάνω δήλωση HTML, ένα ' div ' το στοιχείο έχει προστεθεί με το αναγνωριστικό δηλωμένο ως ' σημάδι ελέγχου '.

Κατά το στυλ του στοιχείου χρησιμοποιώντας τις ιδιότητες CSS, προσθέστε ένα ' ταυτότητα ” επιλογέας για αναφορά στο στοιχείο HTML και, στη συνέχεια, καθορισμό ιδιοτήτων μέσα σε αυτό:

---

---

#σημάδι ελέγχου
{
μετασχηματισμός: περιστροφή ( 45 μοίρες ) ;
ύψος : 45 px;
πλάτος : 20 px;
περιθώριο-αριστερά: πενήντα %;
περίγραμμα-κάτω: 9px συμπαγές σκούρο πράσινο.
περίγραμμα-δεξιά: 9px συμπαγές σκούρο πράσινο.
}

Το παραπάνω στοιχείο στυλ CSS έχει τις ακόλουθες ιδιότητες:

• Ο ' μετασχηματισμός: περιστροφή (45 μοίρες) ” περιστρέφει τις ευθείες κάθετες και οριζόντιες γραμμές με τέτοιο τρόπο που κάνει το σχήμα ενός συμβόλου κρότωνα.
• Ο ' ύψος Η ιδιότητα ' θέτει το ύψος του συμβόλου τικ σε ' 45 εικονοστοιχεία '.
• Ο ' πλάτος 'η ιδιότητα κάνει το σύμβολο' 20 εικονοστοιχεία ' πλατύς.
• Ο ' περιθώριο-αριστερά Η ιδιότητα ' ευθυγραμμίζει το σύμβολο τικ στο κέντρο της διεπαφής της ιστοσελίδας.
• Μετά από αυτό, το « σύνορο-κάτω ' και ' σύνορα-δεξιά Οι ιδιότητες ' ορίζουν το βάρος περιγράμματος και των δύο γραμμών σε ' 9 εικονοστοιχεία ' και ορίστε το ' σκούρο πράσινο ' χρώμα και για τις δύο γραμμές που κάνουν ένα πλήρες σύμβολο τικ.

Αυτό θα δημιουργήσει ένα απλό σημάδι επιλογής με πράσινο χρώμα ή ένα σύμβολο επιλογής που θα εμφανίζεται στο κέντρο της διεπαφής της ιστοσελίδας ' 45 εικονοστοιχεία “υψηλά και” 20 εικονοστοιχεία ' πλατύς:

Μέθοδος 2: Εισαγωγή ενός σημαδιού/επισήμανσης με χρήση χαρακτήρων Unicode

Υπάρχουν επίσης μερικοί χαρακτήρες Unicode που εισάγουν αυτόματα τα σύμβολα σημάδι στην έξοδο χωρίς να χρειάζεται να διαμορφώσετε στυλ και να ορίσετε τιμές παραμέτρων για αυτούς. Για παράδειγμα, ο χαρακτήρας Unicode ' U+2713 ” βοηθά στην προσθήκη ενός απλού συμβόλου τικ στην έξοδο. Ομοίως, ο χαρακτήρας Unicode ' U+2713 ” βοηθάει στην εισαγωγή του λευκού συμβόλου με βαρύ τικ στην έξοδο. Για να μάθετε πώς μπορείτε να προσθέσετε αυτούς τους χαρακτήρες Unicode σε ένα έγγραφο HTML μέσω ενός πλήρους οδηγού, κάντε κλικ εδώ .

συμπέρασμα

Ένα σημάδι επιλογής ή ένα σύμβολο επιλογής μπορεί να σχεδιαστεί δημιουργώντας πρώτα ένα στοιχείο HTML με ένα αναγνωριστικό ή μια κλάση και, στη συνέχεια, προσθέτοντας τον επιλογέα αναγνωριστικού ή κλάσης στο στοιχείο στυλ CSS για αναφορά σε αυτό το στοιχείο. Για να δημιουργήσετε το σχήμα ενός σημάδι επιλογής/τιςκ στη διεπαφή της ιστοσελίδας, διαφορετικές ιδιότητες CSS όπως ' ύψος », « πλάτος », « γυρίζω ' και ' χρώμα ” μπορεί να χρησιμοποιηθεί ανάλογα με τον τύπο και το μέγεθος του σημάδι επιλογής που θέλει κανείς. Αυτό το ιστολόγιο παρουσιάζει τη μέθοδο για τη σχεδίαση ενός σημάδι επιλογής/τις με χρήση CSS.