Επιλογή χρήστη - CSS-Κόλπα

Η user-selectιδιότητα στο CSS ελέγχει τον τρόπο με τον οποίο επιτρέπεται η επιλογή του κειμένου σε ένα στοιχείο. Για παράδειγμα, μπορεί να χρησιμοποιηθεί για να κάνει το κείμενο μη επιλέξιμο.

.row-of-icons ( -webkit-user-select: none; /* Chrome all / Safari all */ -moz-user-select: none; /* Firefox all */ -ms-user-select: none; /* IE 10+ */ user-select: none; /* Likely future */ )

Αυτό είναι χρήσιμο σε περιπτώσεις όπου θέλετε να παρέχετε μια ευκολότερη / καθαρότερη εμπειρία αντιγραφής-επικόλλησης για τους χρήστες (να μην τους έχετε τυχαία επιλογή κειμένου άχρηστα πράγματα, όπως εικονίδια ή εικόνες). Ωστόσο, είναι λίγο αμαξάκι. Ο Firefox επιβάλλει το γεγονός ότι δεν είναι δυνατή η αντιγραφή οποιουδήποτε κειμένου που ταιριάζει με αυτόν τον επιλογέα. Το WebKit εξακολουθεί να επιτρέπει την αντιγραφή του κειμένου εάν επιλέξετε στοιχεία γύρω από αυτό.

Μπορείτε επίσης να το χρησιμοποιήσετε για να επιβεβαιώσετε ότι ένα ολόκληρο στοιχείο παίρνει επιλογή:

.force-select ( -webkit-user-select: all; /* Chrome 49+ */ -moz-user-select: all; /* Firefox 43+ */ -ms-user-select: all; /* No support yet */ user-select: all; /* Likely future */ )

Ακολουθούν μερικές επιδείξεις από αυτές:

Δείτε την επίδειξη επιλογής χρήστη Pen από τον Chris Coyier (@chriscoyier) στο CodePen.

Δεν υπήρχε καμία προδιαγραφή για αυτήν την ιδιότητα για αρκετό καιρό, αλλά τώρα καλύπτεται από το CSS Basic User Interface Module Level 4.

Η προεπιλεγμένη τιμή είναι auto, η οποία κάνει την επιλογή να συμβαίνει κανονικά όπως αναμένετε. Το "Κανονικά" είναι λίγο περίπλοκο. Αξίζει να αναφερθεί από τις προδιαγραφές εδώ:

Στα :: πριν και :: μετά ψευδο στοιχεία, η υπολογισμένη τιμή είναι none

Εάν το στοιχείο είναι ένα επεξεργάσιμο στοιχείο , η υπολογισμένη τιμή είναιcontain

Διαφορετικά, εάν η υπολογισμένη τιμή της επιλογής χρήστη στο γονέα αυτού του στοιχείου είναι all, η υπολογισμένη τιμή είναιall

Διαφορετικά, εάν η υπολογισμένη τιμή της επιλογής χρήστη στο γονέα αυτού του στοιχείου είναι none, η υπολογισμένη τιμή είναιnone

Διαφορετικά, η υπολογισμένη τιμή είναι text

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

Παλαιότερα / Ιδιόκτητα

Ο Firefox υποστηρίζει -moz-none, κάτι που δεν μοιάζει καθόλου, αλλά σημαίνει ότι τα υπο-στοιχεία μπορούν να παρακάμψουν τον καταρράκτη και να γίνουν ξανά επιλέξιμα με το -moz-user-select: text;As of Firefox 21, κανένα δεν συμπεριφέρεται -moz-none.

Ο Internet Explorer υποστηρίζει επίσης μια πολύ-ιδιόκτητη τιμή, elementστην οποία μπορείτε να επιλέξετε κείμενο μέσα στο στοιχείο, αλλά η επιλογή θα σταματήσει στα όρια αυτού του στοιχείου.

Περισσότερες πληροφορίες

Έγγραφα MDN
Διαλειτουργικότητα Επιλογή χρήστη

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

Αυτό είναι ειδικά για -*-user-select: none;

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