Read : 4 minutes. 30 November 2022
Tags: Website

Cara Disable Highlight Text Selection di HTML Menggunakan CSS

Kita dapat menggunakan property user options di CSS untuk disable text selection highlighting di halaman HTML. Ini bukan fitur standar, tetapi tersedia di semua browser modern kecuali IE 9 & sebelumnya.

Menggunakan user options: none

Untuk disable text selection dalam HTML, kita perlu memberikan nilai user-selected property value as none. Lihat melalui contoh di bawah ini untuk memahami jika lebih lanjut.

1<div>
2Anda dapat memilih teks ini.
3</div>
4<div class="disable-select">
5Anda tidak dapat memilih teks ini, pemilihan teks dinonaktifkan
6</div>

Pertama Saya telah menambahkan class disable-select ke div, kedua sekarang saya akan menambahkan property css user-select:

1.disable-select {
2    user-select: none; /* supported by Chrome and Opera */
3   -webkit-user-select: none; /* Safari */
4   -khtml-user-select: none; /* Konqueror HTML */
5   -moz-user-select: none; /* Firefox */
6   -ms-user-select: none; /* Internet Explorer/Edge */
7}

Tetapi kita harus menambahkan awalan khusus browser sebelum opsi yang dipilih pengguna untuk safari, firefox dan internet explorer atau edge.

Untuk browser google Chrome dan opera mendukung versi tanpa awalan.

Di Google Chrome

Untuk menonaktifkan penyorotan pemilihan teks (disable text selection highlighting) di browser Google Chrome menggunakan CSS cukup setel property -user-select CSS ke none.

Dan tidak ada awalan yang diperlukan untuk Google Chrome dan Opera Browser.

1 .disable-select{
2  user-select:none;
3}

Di mozila firefox

Untuk menonaktifkan penyorotan pemilihan teks (disable text selection highlighting) di browser mozilla firefox menggunakan CSS cukup setel properti CSS -moz-user-select ke none.

Dan kita perlu menambahkan awalan -moz sebelum properti yang dipilih pengguna untuk Browser mozilla firefox.

1 .disable-select{
2   -moz-user-select:none;
3}

Di Safari

Untuk menonaktifkan penyorotan pemilihan teks di browser Safari menggunakan CSS, cukup setel properti CSS -webkit-user-select ke none.

Dan kita perlu menambahkan awalan -webkit sebelum properti yang dipilih pengguna untuk Browser Safari.

1 .disable-select{
2  -webkit-user-select:none;
3}

Di iOS Safari

Untuk menonaktifkan penyorotan pemilihan teks di browser Safari iOS menggunakan CSS, cukup setel properti CSS -webkit-touch-callout ke none.

1 .disable-select{
2  -webkit-touch-callout:none;
3}

Di Internet Explorer/Edge

Untuk menonaktifkan penyorotan pemilihan teks di browser Internet Explorer/Edge menggunakan CSS cukup setel properti CSS -ms-user-select ke none.

Dan kita perlu menambahkan awalan -ms sebelum properti yang dipilih pengguna untuk Internet Explorer/Edge.

1 .disable-select{
2   -ms-user-select:none;
3}

Apa yang akan dilakukan oleh property user-select?

property css user-select mengontrol apakah teks dalam elemen HTML dapat dipilih atau tidak. Ini bukan fitur standar.

Anda dapat menemukan detail lebih lanjut tentang spesifikasi draf disini.

user-select property values

user-select valuedescription
nonepengguna tidak dapat memilih teks
textpengguna dapat memilih teks
allpengguna dapat memilih teks dengan satu klik
autonilai pilihan pengguna bergantung pada opsi pilihan pengguna induknya
containseleksi akan terikat pada elemen tertentu
elementVersi IE dari pilihan pengguna mengandung.

user-select none

Seperti dijelaskan di atas, ketika kami memberikan nilai properti user-select : none ke elemen HTML, kami tidak dapat memilih teks di dalam element termasuk elemen turunannya.

1<div style="user-select:none;border:1px solid">
2pemilihan teks dinonaktifkan
3<div>Pemilihan teks dinonaktifkan di elemen anak juga</div>
4</div>

user-select text

Saat Anda memberikan property user-select : text, pengguna dapat memilih teks.

1<div style="user-select: none; border: 1px solid;">
2pemilihan teks dinonaktifkan
3<div style="user-select: text;">Anda dapat memilih saya</div>
4<div>pemilihan teks dinonaktifkan</div>
5</div>

user-select all

Saat kami memberikan property user-select : all. Teks di dalam elemen dipilih secara otomatis pada klik konteks.

html```

Pada klik ini dapat memilih teks
```

user-select auto

perilaku user-select auto tergantung pada nilai yang dihitung dari elemen induknya dari user-select.

  1. Jika nilai yang dihitung dari elemen induk tidak ada maka nilainya none. atau jika nilai yang dihitung adalah semua maka nilainya adalah all. atau jika nilainya adalah teks, nilainya adalah text
  2. Jika tidak, perilaku default adalah text. yaitu pengguna dapat memilih text.
  3. Pada pseudo elements ::before dan ::after perilaku none
  4. Dan jika elemen adalah elemen yang dapat diedit yaitu, text atau textarea, nilai yang dihitung berisi atau elemen (Dalam IE)

user-select contain

user-select contain tidak didukung di browser lain kecuali internet explorer. Di IE kita harus memberikan opsi user-select : contain.

Jadi apa sebenarnya yang akan dilakukan oleh user-select : contain ini?

Ketika Anda memberikan user-select sebagai contain atau pemilihan elemen akan terikat ke elemen itu dan tidak dapat diperpanjang.

Lihat melalui demo di bawah ini untuk memahaminya lebih lanjut.

contoh CSS user-select

Kita akan melihat semua opsi user-select di satu tempat.

 1<h3>user-select:none</h3>
 2<div class="text-selection-none">
 3pemilihan teks dinonaktifkan
 4<div>Pemilihan teks dinonaktifkan di elemen anak-anak juga</div>
 5</div>
 6
 7<h3>user-select:text</h3>
 8<div class="text-selection-none">
 9pemilihan teks dinonaktifkan
10<div class="text-selection-text">Anda dapat memilih saya</div>
11<div>pemilihan teks dinonaktifkan</div>
12</div>
13
14<h3>user-select:all</h3>
15<div class="text-selection-all">
16  Pada klik ini dapat memilih teks
17</div>
18
19<h3>user-select:auto</h3>
20<div class="text-selection-none">
21pemilihan teks dinonaktifkan
22<div class="text-selection-auto">sebagai elemen induk tidak ada yang tidak dapat memilih teks</div>
23<div>pemilihan teks dinonaktifkan</div>
24<br/>
25
26<div class="text-selection-text">
27pemilihan teks diaktifkan
28<div class="text-selection-auto">sebagai elemen induk adalah teks, dapat memilih teks</div>
29<div> pemilihan teks diaktifkan</div>
30
31<br/>
32
33<div class="before text-selection-auto">sebagai elemen induk adalah teks, dapat memilih teks<br/></div>
34
35<h3>
36user-select:contain
37</h3>
38
39<div class="text-selection-contain">pemilihan teks mengandung<br/></div>
40<div>Ini tidak dipilih</div>

Dan nilai CSS yang sesuai adalah

 1.text-selection-none{
 2user-select: none; /* supported by Chrome and Opera */
 3-webkit-user-select: none; /* Safari */
 4-khtml-user-select: none; /* Konqueror HTML */
 5-moz-user-select: none; /* Firefox */
 6-ms-user-select: none;
 7}
 8.text-selection-text{
 9user-select: text; /* supported by Chrome and Opera */
10-webkit-user-select: text; /* Safari */
11-khtml-user-select: text; /* Konqueror HTML */
12-moz-user-select: text; /* Firefox */
13-ms-user-select: text;
14}
15.text-selection-all{
16user-select: all; /* supported by Chrome and Opera */
17-webkit-user-select: all; /* Safari */
18-khtml-user-select: all; /* Konqueror HTML */
19-moz-user-select: all; /* Firefox */
20-ms-user-select: all;
21}
22.text-selection-auto{
23user-select: auto; /* supported by Chrome and Opera */
24-webkit-user-select: auto; /* Safari */
25-khtml-user-select: auto; /* Konqueror HTML */
26-moz-user-select: auto; /* Firefox */
27-ms-user-select: auto;
28}
29.text-selection-contain{
30user-select: contain; 
31-webkit-user-select: contain; 
32-khtml-user-select: contain; 
33-moz-user-select: contain; 
34-ms-user-select: element; /*Only IE supports user-select contain option*/
35}
36div.before::after {
37content: "hi";
38}

Seperti dijelaskan di atas user-select : contain hanya didukung di IE, jika Anda membuka di IE, Anda dapat mengamati perilaku pemilihan elemen tidak dapat diperpanjang di luar elemen dengan class .text-selection-contain.

Cara Disable Highlight Text Selection di HTML Menggunakan CSS