Merubah Warna Seleksi Teks Dengan Css

Halo, Apa kabar semuannya kali ini kita akan membahas tips merubah warna seleksi teks.

Biasannya ketika kita menseleksi teks atau highlight text pada broser, maka setips bawaan broser warna latar belakang teks menjadi biru dan warna teks menjadi putih.

Terkadang hal tersebut tidak cocok untk tema dari WEBsite sobat, untk itu teman perlu menggantinya dengan memakai CSS ::selection.

Penulisan dan Dukungan Broser

::selection mulai diperkenalkan di CSS 3, maka Internet Explorer versi usang tidak mendukung seleksi teks,  jadi teman yang pakai IE versi usang harus update ke versi 9 atau yang lebih tingi lagi.

Sedangakan broser seperi Mozilla Firefox, Google, Opera telah mendukunggnaya, jadi teman tidak perlu khawatir.

Mayorita broser telah mendukung penulisan ::selection namun khusus untk broser dengan engine Gecko menyerupai Mozilla Firefox , penulisannya harus menambahkan prefix -moz sehingga menjadi ::-moz-selection.

Perlu diperhatikan juga bahwa kita tidak dapat memakai penulisan :selection dan elemen ::selection ini hnya mendukung properti color dan background, sehingga teman tidak dapat mengganti ukuran huruf, jenis karakter dan lain-lainnya.

Trik Merubah Warna dan Latar Belakang Teks Terseleksi

Berikut ini pola CSS untk merubah warna dan latar belakang teks yang terseleksi.

1. Semua Elemen

Triknya sangat mudah, pada dokumen CSS teman hnya perlu menambahkan skrip berikut:

::selection {  background-color: #000;  color: #FFF; } ::-moz-selection {  background-color: #000;  color: #FFF; }

Penjelasan :
1. Perintah ::selection dan ::-moz-selection merupakan selektor untk merubah warna seleksi pada teks.
2. Perintah background-color:black; memperlihatkan warna latar belakang hitam ketika diseleksi.
3. Perintah color:white; memberikan warna teks putih ketika diseleksi.

Jika sudah ditemel didokumen CSS teman dapat mencobanya dan kesannya menyerupai ini :

3. Elemen Tertentu

Teks yang akan terseleksi hnya teks yang berada dalam tag <article>, misalnya menyerupai ini :

Untuk CSS-nya menyerupai ini.

article::selection {  background: #000;  color: #FFF; } article::-moz-selection {  background: #000;  color: #FFF; }

Okay sekian dari Saya, selamat mencoba...
Sumber https://mas-abdi.blogspot.com/