Merubah Warna Select Text Dengan CSS Selection

Ketika kita akan melakukan Copy pada suatu tulisan atau kalimat panjang, hal yang pertama dilakukan biasanya adalah memblok atau melakukan selection pada text atau tulisan yang akan kita copy. Secara default warna selection tersebut adalah biru pada setiap browser. Disini kita akan belajar cara merubah warna select pada text atau tulisan dengan CSS ::selection

Perhatian gambar dibawah ini:

Pada gambar diatas terlihat jelas warna default ketika kita melakukan blok atau select pada tulisan yaitu biru dengan code HTML warnanya #3390ff

Untuk merubah warna selection tersebut kita bisa menggunakan CSS sebagai berikut:


  ::selection{ /* all browser */
  background:#ed3237; /* untuk warna background selection */
  color:#FFF; /* untuk warna huruf atau tulisan ketika di blok */
  }
  
  ::-moz-selection{ /* Firefox syntax (version 61 and below) */
  background:#ed3237; /* untuk warna background selection */
  color:#FFF; /* untuk warna huruf atau tulisan ketika di blok */
  }
  
  ::-webkit-selection{ /* Safari syntax */
  background:#ed3237; /* untuk warna background selection */
  color:#FFF; /* untuk warna huruf atau tulisan ketika di blok */
  }

Sekarang silahkan select atau Blok tulisan dibawah ini:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem. In porttitor. Donec laoreet nonummy augue. Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy. Fusce aliquet pede non pede. Suspendisse dapibus lorem pellentesque magna. Integer nulla. Donec blandit feugiat ligula. Donec hendrerit, felis et imperdiet euismod, purus ipsum pretium metus, in lacinia nulla nisl eget sapien.

Tulisan diatas ketika kita select atau blok warna background selection nya berwarna merah sesuai dengan CSS yang sudah kita sesuaikan dengan kode warna HTML nya #ed3237

Seperti itulah Cara merubah warna select atau blok dengan CSS. Jika kalian ini mencegah orang lain untuk melakukan blok atau select atau seleksi pada artikel blog kalian, bisa mencoba CSS di artikel ini : https://www.azislamayuda.com/2021/07/anti-copy-paste-dengan-css-user-select.html

Referensi

https://www.w3schools.com/cssref/sel_selection.asp

https://developer.mozilla.org/en-US/docs/Web/CSS/::selection