Cara disable Selection Text dengan css, atau dengan bahasa Asing nya How to disable text selection Highlighting ?? ... Secara umum atau keseluruhan tentu kita terbiasa menggunakan CTRL+A , untuk mem-blok atau menyeleksi sebuah halaman website.

Mungkin teman-teman ingin tahu bagaimana caranya agar text di web tidak bisa diseleksi alias terdisable. Pernahkan menjumpai website dengan fitur tersebut.. ?? dimana artikelnya tidak bisa di copy..

Dengan CSS3 kita bisa membuatnya.. Hal ini dilakukan untuk menghindari plagiat.. copy paste sembarangan oleh pihak-pihak yang tidak bertanggung jawab..So wajar saja seseorang web developer memproteksi webiste nya.

Demo

Cara Agar Artikel di Website tidak di Copy Paste

Dengan menggunakan fungsi CSS tentu kita dapat mengatasi masalah ini , kita hanya perlu menambahkan code CSS dibawah ini sebelum tag </head> pada file index website kita

Script CSS Disable Selection

Berikut ini script yang bisa kita gunakan untuk men-disable selection text :

<style type="text/css">
  body{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
</style>

Disini kita membuat class terlebih dahulu :

.noselect {
    cursor: default;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

Dalam Penggunaanya kita bisa memanfaat kan tag <div> atau tag <p> pada HTML , disini saya menggunakan Tag <p> , Berikut contohnya , agar tidak hanya text tertentu saja yang tidak bisa di seleksi dan bisa di seleksi

<p>
  Selectable text.
</p>
<p class="noselect">
  Text tidak bisa diseleksi
</p>

Nah.. bagaimana ..mudah bukan.. semoga bermanfaat untuk senterwebs-web semua..

 Demo