:: επιλογή - CSS-Κόλπα

Χρησιμοποιώντας τον κέρσορα επιλέξτε αυτήν την πρόταση. Παρατηρήστε πώς καθώς επιλέγετε το κείμενο ένα χρώμα φόντου γεμίζει το χώρο; Μπορείτε να αλλάξετε το χρώμα φόντου και το χρώμα του επιλεγμένου κειμένου με στυλ ::selection. Το στυλ αυτού του ψευδο στοιχείου είναι ιδανικό για την αντιστοίχιση κειμένου που έχει επιλέξει ο χρήστης με το συνδυασμό χρωμάτων των ιστότοπών σας.

p::-moz-selection ( color: red) p::selection ( color: red; )

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

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

::-moz-selection ( background: yellow; ) ::selection ( background: yellow; )

Υπάρχουν μόνο τρεις ιδιότητες που ::selectionθα λειτουργήσουν με:

color
background( background-color, background-image)
text-shadow

Δείτε τις δοκιμές επιλογής Pen :: Chris Coyier (@chriscoyier) στο CodePen.

Εάν προσπαθήσετε να κάνετε στυλ ::selectionμε μια ιδιότητα που δεν περιλαμβάνεται στη λίστα, τότε η ιδιότητα θα αγνοηθεί. Μπορεί να είναι δύσκολο να δείτε backgroundσε αυτήν τη λίστα, επειδή η ιδιότητα θα αποδίδει χρώμα μόνο όταν χρησιμοποιείται ::selectionκαι δεν θα αποδίδει εικόνα φόντου ή ντεγκραντέ.

Επίσης, μην το δοκιμάσετε:

p::-moz-selection, p::selection ( color: red; )

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

Μία από τις πιο χρήσιμες χρήσεις ::selectionείναι η απενεργοποίηση text-shadowκατά τη διάρκεια της επιλογής. Το A text-shadowμπορεί να συγκρουστεί με το χρώμα φόντου της επιλογής και να κάνει το κείμενο δύσκολο να διαβαστεί. Ρυθμίστε text-shadow: none;για να κάνετε το κείμενο σαφές και ευανάγνωστο κατά την επιλογή.

Δείτε το στυλό κειμένου επιλογής :: Chris Coyier (@chriscoyier) στο CodePen.

Fancy :: επιλογή

Σε συνδυασμό με το Sass ή με οποιονδήποτε άλλο προεπεξεργαστή, μπορείτε να κάνετε πραγματικά εντυπωσιακά εφέ ::selection. Επιλέξτε το κείμενο στην παρακάτω επίδειξη:

Ίσως παρατηρήσετε ότι το αποτέλεσμα δεν είναι τόσο ομαλό σε ορισμένα προγράμματα περιήγησης. Ας αρχειοθετήσουμε αυτό το demo: πράγματα που είναι πιθανά, αλλά πιθανώς μόνο για διασκέδαση.

Ένα άλλο χαζό, αλλά διασκεδαστικό μικρό κόλπο είναι να αποκαλύψετε μια εικόνα μέσω επιλεγμένου κειμένου.

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

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