Pilih pengguna - Trik CSS | CSS Almanak 2024

The user-selectproperti di CSS mengontrol bagaimana teks dalam elemen diperbolehkan untuk dipilih. Misalnya, ini dapat 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 salin-tempel yang lebih mudah / lebih bersih bagi pengguna (jangan biarkan mereka secara tidak sengaja memilih teks hal-hal yang tidak berguna, seperti ikon atau gambar). Namun itu agak buggy. Firefox memberlakukan fakta bahwa teks apa pun yang cocok dengan pemilih itu tidak dapat disalin. WebKit masih memungkinkan teks untuk disalin jika Anda memilih elemen di sekitarnya.

Anda juga dapat menggunakan ini untuk memastikan bahwa seluruh elemen mendapatkan 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 beberapa demo dari mereka:

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

Tidak ada spesifikasi untuk properti ini selama beberapa waktu, tetapi sekarang tercakup dalam Modul Antarmuka Pengguna Dasar CSS Level 4.

Nilai defaultnya adalah auto, yang membuat pemilihan terjadi secara normal seperti yang Anda harapkan. "Biasanya" agak rumit. Layak dikutip dari spesifikasi di sini:

Pada pseudo elemen :: before dan :: after, nilai yang dihitung adalah none

Jika elemen adalah elemen yang dapat diedit , nilai yang dihitung adalahcontain

Sebaliknya, jika nilai yang dihitung dari pilihan pengguna pada induk elemen ini adalah all, nilai yang dihitung adalahall

Sebaliknya, jika nilai yang dihitung dari pilihan pengguna pada induk elemen ini adalah none, nilai yang dihitung adalahnone

Jika tidak, nilai yang dihitung adalah text

Dengan kata lain, itu secara cerdas mengalir dan diatur ulang ke keadaan yang sensual. Sepertinya fitur ini dapat digunakan untuk membuat elemen semu dapat dipilih, tetapi belum ada kata akhir.

Lebih Tua / Hak Milik

Firefox mendukung -moz-none, yang tidak seperti tidak ada kecuali itu berarti sub-elemen dapat menggantikan kaskade dan menjadi dapat dipilih lagi dengan -moz-user-select: text;Pada Firefox 21, tidak ada yang berperilaku seperti -moz-none.

Internet Explorer juga mendukung nilai kepemilikan sejauh ini element, di mana Anda dapat memilih teks di dalam elemen tetapi pemilihan akan berhenti di batas elemen itu.

Informasi Lebih Lanjut

Dokumen MDN
Interoperabilitas Pilihan Pengguna

Dukungan Browser

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

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