Pilih pengguna - Trik CSS | CSS Almanac 2025

The user-selectharta di CSS mengawal bagaimana teks dalam unsur yang dibenarkan untuk dipilih. Sebagai contoh, ia boleh digunakan untuk membuat teks tidak dapat dipilih.

.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 */ )

Ini berguna dalam situasi di mana anda ingin memberikan pengalaman copy-paste yang lebih mudah / lebih bersih untuk pengguna (jangan biarkan mereka memilih teks yang tidak berguna, seperti ikon atau gambar). Walau bagaimanapun, ia agak buggy. Firefox menegaskan fakta bahawa teks yang sepadan dengan pemilih tidak dapat disalin. WebKit masih membenarkan teks disalin jika anda memilih elemen di sekitarnya.

Anda juga dapat menggunakannya untuk menegaskan bahawa keseluruhan elemen mendapat pilihan:

.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 */ )

Berikut adalah beberapa demo:

Lihat demo pilihan pengguna Pen oleh Chris Coyier (@chriscoyier) di CodePen.

Tidak ada spesifikasi untuk harta tanah ini sejak sekian lama, tetapi sekarang dilindungi di bawah Modul Antara Muka Pengguna Asas CSS Tahap 4.

Nilai lalai adalah auto, yang membuat pemilihan berlaku seperti yang anda harapkan. "Biasanya" agak rumit. Perlu dipetik dari spesifikasi di sini:

Pada elemen :: sebelum dan :: selepas pseudo, nilai yang dikira adalah none

Sekiranya elemen tersebut adalah elemen yang dapat diedit , nilai yang dikira adalahcontain

Jika tidak, jika nilai yang dikira pengguna-pilih pada induk elemen ini adalah all, nilai yang dikira adalahall

Jika tidak, jika nilai yang dikira pengguna-pilih pada induk elemen ini adalah none, nilai yang dikira adalahnone

Jika tidak, nilai yang dikira adalah text

Dengan kata lain, ia secara cerdas melambung dan kembali ke keadaan sensasi. Sepertinya mungkin ciri ini dapat digunakan untuk membuat elemen semu dapat dipilih, tetapi belum ada kata akhir.

Lebih Lama / Hak Milik

Firefox menyokong -moz-none, yang tidak seperti apa-apa kecuali ia bermaksud sub-elemen dapat mengatasi lata dan menjadi pilihan semula dengan -moz-user-select: text;As of Firefox 21, tidak ada yang berperilaku seperti itu -moz-none.

Internet Explorer juga menyokong nilai proprietari sejauh ini element, di mana anda boleh memilih teks di dalam elemen tetapi pemilihan akan berhenti di batas elemen tersebut.

Maklumat lanjut

Dokumen MDN
Pengguna memilih antara operasi

Sokongan Penyemak Imbas

Ini khusus untuk -*-user-select: none;

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