Εμφάνιση - CSS-Κόλπα

Η appearanceιδιότητα χρησιμοποιείται για την εμφάνιση ενός στοιχείου χρησιμοποιώντας ένα στυλ πλατφόρμας που βασίζεται στο θέμα του λειτουργικού συστήματος των χρηστών.

.thing ( -webkit-appearance: value; -moz-appearance: value; appearance: value; )

Αυτό αρχίζει να είναι απροσδιόριστο, κάτι που είναι υπέροχο επειδή η ιστορία του cross-browser εδώ είναι πολύ περίπλοκη.

Το appearanceακίνητο χρησιμοποιείται για έναν από τους δύο λόγους:

Για να εφαρμόσετε στυλ ειδικά για πλατφόρμα σε ένα στοιχείο που δεν το έχει από προεπιλογή
Για να καταργήσετε το στυλ για συγκεκριμένη πλατφόρμα σε ένα στοιχείο που το έχει από προεπιλογή

Για παράδειγμα, οι είσοδοι με type=searchπρογράμματα περιήγησης στο WebKit από προεπιλογή έχουν στρογγυλεμένες γωνίες και είναι πολύ αυστηρές σε ό, τι μπορείτε να αλλάξετε μέσω CSS. Εάν δεν θέλετε αυτό το στυλ, μπορείτε να το αφαιρέσετε με μια εμφάνιση.

input(type=search) ( -webkit-appearance: none; )

Ή θα μπορούσατε να λάβετε μια είσοδο με type = text και απλώς να την κάνετε να μοιάζει με μια είσοδο αναζήτησης:

input(type=text) ( -webkit-appearance: searchfield; )

Τιμές WebKit

πλαίσιο ελέγχου
ραδιόφωνο
μπουτόν
τετράγωνο κουμπί
κουμπί
κουμπί-λοξότμηση
πλαίσιο λίστας
λίστα
εμμηνόπαυση
κουμπί-μενού
μενολιστική-κείμενο
μενολόγος-πεδίο κειμένου
πλήκτρο κύλισης-επάνω
πλήκτρο κύλισης-κάτω
πλήκτρο κύλισης-αριστερά
κουμπί κύλισης-δεξιά
scrollbartrack-horizontal
scrollbartrack-κάθετη
scrollbarthumb-horizontal
scrollbarthumb-κάθετη
scrollbargripper-οριζόντια
scrollbargripper-κάθετη
ρυθμιστικό-οριζόντιο
ρυθμιστικό-κατακόρυφο
sliderthumb-οριζόντια
sliderthumb-κάθετη
αγκύλη
πεδίο αναζήτησης
πεδίο αναζήτησης-διακόσμηση
αναζήτηση-αποτελέσματα-διακόσμηση
κουμπί αναζήτησης-αποτελεσμάτων
κουμπί αναζήτησης-ακύρωση-κουμπί
πεδίο κειμένου
textarea

Τιμές Mozilla

κανένας
κουμπί
πλαίσιο ελέγχου
πλαίσιο ελέγχου-κοντέινερ
πλαίσιο ελέγχου μικρό
διάλογος
πλαίσιο λίστας
μηνύμα
εμμηνόπαυση
κουμπί-μενού
μενολόγος-πεδίο κειμένου
εμμηνόπαυση
γραμμή προόδου
ραδιόφωνο
ραδιόφωνο-δοχείο
μικρό ραδιόφωνο
αλλαγή μεγέθους
γραμμή κύλισης
πλήκτρο κύλισης-κάτω
πλήκτρο κύλισης-αριστερά
κουμπί κύλισης-δεξιά
πλήκτρο κύλισης-επάνω
scrollbartrack-horizontal
scrollbartrack-κάθετη
διαχωριστής
γραμμή κατάστασης
αυτί
Καρτέλα αριστερά-άκρη
καρτέλες
πεδίο κειμένου
textfield-multiline
γραμμή εργαλείων
κουμπί εργαλειοθήκης
εργαλειοθήκη
-moz-mac-ενοποιημένη γραμμή εργαλείων
-moz-win-χωρίς γυαλί-γυαλί
-moz-win-browsertabbar-εργαλειοθήκη
-moz-win-επικοινωνίες-εργαλειοθήκη
-moz-win-glass
-moz-win-media-εργαλειοθήκη
συμβουλή εργαλείου
δέντρο κεφαλής
treeheadersortarrow
δέντρο
τρυφερός
τρυβιστόπεν
δέντρα
παράθυρο

Πόροι

Έγγραφα Mozilla για εμφάνιση -moz
Trent Walton στο Webkit Εμφάνιση
Shaun Inman για την απενεργοποίηση της σκιάς εσωτερικών κειμένων των εισόδων κειμένου στο iPad
Προδιαγραφές CSS3

Υποστήριξη προγράμματος περιήγησης

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