Cara Menonaktifkan Selection Text Dengan CSS

Posted in HTML & CSS Life at 25 Desember 2017 With 0 Comments

Cara disable Selection Text dengan css, atau dengan bahasa Asing nya How to disable text selection Highlighting ?? ... 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.

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>

Pada script diatas.. kita memberikan pada tag body.. sehingga hasilnya seluruh website kita tidak bisa di selection.. nah bagaimana caranya.. jika kita ingin pada bagian tertentu saja.. ????

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;
}

Na... penggunaannya dapat kita gunakan sebagai berikut :

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

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

 

Artikel Rekomendasi

Artikel Terkait

Diskusi

wa