:: seleksi - Trik CSS | CSS Almanak 2025

Menggunakan kursor Anda, pilih kalimat ini. Perhatikan bagaimana Anda memilih teks, warna latar belakang mengisi ruang? Anda dapat mengubah warna latar belakang dan warna teks yang dipilih dengan gaya ::selection. Memberi gaya pada elemen semu ini sangat bagus untuk mencocokkan teks pilihan pengguna dengan skema warna situs Anda.

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

Perhatikan bahwa titik dua ganda diperlukan dalam sintaks untuk elemen pseudo ini, meskipun elemen pseudo lainnya menerima titik dua tunggal.

Seperti yang terlihat di atas, Anda dapat mengatur gaya ::selectionpada elemen individu. Anda juga dapat mengatur gaya seluruh halaman dengan melepaskan elemen semu telanjang di lembar gaya Anda.

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

Hanya ada tiga properti yang ::selectionakan berfungsi:

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

Lihat tes seleksi Pen :: oleh Chris Coyier (@chriscoyier) di CodePen.

Jika Anda mencoba ::selectionmengatur gaya dengan properti yang tidak ada dalam daftar, maka properti itu akan diabaikan. Mungkin sulit dilihat backgrounddalam daftar itu karena properti hanya akan membuat warna saat digunakan ::selectiondan tidak akan membuat gambar latar belakang atau gradien.

Juga jangan coba ini:

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

Ketika browser menemukan bagian dari pilihan yang tidak mereka mengerti, mereka menjatuhkan semuanya, jadi ini akan gagal sepanjang waktu.

Salah satu kegunaan paling berguna untuk ::selectionadalah mematikan a text-shadowselama pemilihan. A text-shadowdapat berbenturan dengan warna latar belakang pemilihan dan membuat teks sulit untuk dibaca. Setel text-shadow: none;agar teks jelas dan mudah dibaca selama pemilihan.

Lihat Pen :: selection text-shadow oleh Chris Coyier (@chriscoyier) di CodePen.

Fancy :: seleksi

Dipasangkan dengan Sass, atau praprosesor lainnya, Anda dapat membuat efek yang sangat keren ::selection. Pilih teks dalam demo di bawah ini:

Anda mungkin memperhatikan efeknya tidak begitu mulus di beberapa browser. Mari ajukan demo itu di bawah: hal-hal yang mungkin, tetapi mungkin hanya untuk kesenangan.

Trik kecil yang bodoh tapi menyenangkan lainnya adalah mengungkapkan gambar melalui teks yang dipilih.

Dukungan Browser

Data dukungan browser ini berasal dari Caniuse, yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur pada versi tersebut dan yang lebih baru.