Merubah Warna Seleksi Teks Dengan CSS

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

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

Terkadang hal tersebut tidak cocok untuk tema dari website sobat, untuk itu sobat perlu menggantinya dengan menggunakan CSS ::selection.

Penulisan dan Dukungan Browser

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

Sedangakan browser seperi Mozilla Firefox, Chrome, Opera telah mendukunggnaya, jadi sobat tidak perlu khawatir.

Mayorita browser telah mendukung penulisan ::selection namun khusus untuk browser dengan engine Gecko seperti Mozilla Firefox , penulisannya harus menambahkan prefix -moz sehingga menjadi ::-moz-selection.

Perlu diperhatikan juga bahwa kita tidak bisa menggunakan penulisan :selection dan elemen ::selection ini hanya mendukung properti color dan background, sehingga sobat tidak bisa mengganti ukuran huruf, jenis huruf dan lain-lainnya.

Cara Merubah Warna dan Latar Belakang Teks Terseleksi

Berikut ini contoh CSS untuk merubah warna dan latar belakang teks yang terseleksi.

1. Semua Elemen

Caranya sangat mudah, pada dokumen CSS sobat hanya 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 untuk merubah warna seleksi pada teks.
2. Perintah background-color:black; memberikan warna latar belakang hitam saat diseleksi.
3. Perintah color:white; memberikan warna teks putih saat diseleksi.

Jika sudah ditemel didokumen CSS sobat bisa mencobanya dan hasilnya seperti ini :

3. Elemen Tertentu

Teks yang akan terseleksi hanya teks yang berada dalam tag <article>, contohnya seperti ini :

Untuk CSS-nya seperti ini.

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

Okay sekian dari Saya, selamat mencoba...

Share this post