:: pemilihan - Trik CSS | CSS Almanac 2025

Dengan menggunakan kursor anda pilih ayat ini. Perhatikan bagaimana semasa anda memilih teks warna latar mengisi ruang? Anda boleh mengubah warna latar belakang dan warna teks yang dipilih dengan menggayakan ::selection. Menggayakan elemen semu ini sangat bagus untuk memadankan teks pilihan pengguna dengan skema warna laman web anda.

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

Perhatikan bahawa kolon ganda diperlukan dalam sintaks untuk unsur pseudo ini, walaupun unsur pseudo lain menerima satu titik dua.

Seperti yang dilihat di atas, anda boleh menggayakan ::selectionelemen individu. Anda juga boleh menggayakan keseluruhan halaman dengan menjatuhkan elemen semu kosong di helaian gaya anda.

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

Hanya ada tiga sifat yang ::selectionboleh digunakan:

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

Lihat ujian pemilihan Pen :: oleh Chris Coyier (@chriscoyier) di CodePen.

Sekiranya anda mencuba gaya ::selectiondengan harta yang tidak ada dalam senarai, maka harta itu akan diabaikan. Mungkin sukar untuk dilihat backgrounddalam senarai itu kerana harta tanah hanya akan memberikan warna ketika digunakan ::selectiondan tidak akan menghasilkan gambar latar belakang atau kecerunan.

Jangan mencuba ini:

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

Apabila penyemak imbas menemui bahagian pilihan yang tidak mereka fahami, mereka membuang semuanya, jadi ini akan gagal sepanjang masa.

Salah satu kegunaan yang paling berguna ::selectionadalah mematikan pilihan text-shadowsemasa pemilihan. A text-shadowdapat bertentangan dengan warna latar belakang pilihan dan menjadikan teks sukar dibaca. Tetapkan text-shadow: none;untuk menjadikan teks jelas dan mudah dibaca semasa pemilihan.

Lihat Pen :: teks pilihan bayangan oleh Chris Coyier (@chriscoyier) di CodePen.

Pilihan :: pilihan

Dipasangkan dengan Sass, atau praprosesor lain, anda boleh menghasilkan kesan yang sangat menarik ::selection. Pilih teks dalam demo di bawah:

Anda mungkin menyedari kesannya tidak begitu lancar di beberapa penyemak imbas. Mari failkan demo di bawah: perkara-perkara yang mungkin, tetapi mungkin hanya untuk keseronokan.

Satu muslihat kecil yang bodoh tetapi menyeronokkan adalah mendedahkan gambar melalui teks yang dipilih.

Sokongan Penyemak Imbas

Data sokongan penyemak imbas ini berasal dari Caniuse, yang mempunyai lebih terperinci. Nombor menunjukkan bahawa penyemak imbas menyokong ciri pada versi dan ke atas.