Mengganti Warna dan Background Teks Yang Terseleksi

Ketika kita menseleksi text atau meng-highlight teks  pada browser, secara default warna background teks tersebut menjadi biru dan warna teks menjadi putih, terkadang hal tersebut tidak cocok dengan theme/tema dari website kita, untuk itu kita perlu menggantinya, sebelumnya hal tersebut sulit dilakukan karena belum ada standard css-nya, namun dengan kehadiran CSS 3, mengganti warna dan background teks yang terseleksi dapat dilakukan dengan mudah, yaitu dengan pseudo-element ::selection.

Penulisan dan Dukungan Browser

Karena diperkenalkan mulai CSS 3, maka tidak didukung oleh Internet Explorer versi lama, IE baru mendukungnya pada versi 9+, sedangkan semua browser modern telah mendukungnya.

Mayoritas browser telah mendukung penulisan  ::selection, namun khusus untuk browser dengan engine Gecko, seperti firefox, penulisannya harus menggunkan prefix -moz, sehingga menjadi  ::-moz-selection, perlu diperhatikan juga bahwa kita tidak bisa menggunakan single colon (:selection), dimana hal tersebut dapat dilakukan pada pseudo element lainnya (seperti :before, dan :after).

Untuk property, element ini hanya mendukung property terkait color dan background, sehingga untuk merubah warna seleksi pada teks, hanya dapat dilakukan  pada warna teks dan warna background, tidak dapat dilakukan untuk property lainnya seperti ukuran huruf, jenis huruf, dll, untuk lebih lengkapnya sobat dapat mengunjungi halaman mozilla, berikut ini contoh format penulisannya:

::selection {
	background: red;
	color: #FFFFFF;
}
::-moz-selection {
	background: red;
	color: #FFFFFF;
}

Kedua rule tersebut harus dipisah, jika tidak, maka tidak akan dapat bekerja, kita tidak dapat menggabungkannya seperti yang biasa kita lakukan dengan menggunakan koma seperti ini:

::selection,
::-moz-selection {
	background: red;
	color: #FFFFFF;
}

Contoh css untuk merubah warna dan background teks yang terseleksi

Berikut ini contoh css untuk merubah warna dan background teks yang terseleksi menjadi putih dan merah

1. Contoh untuk element tertentu (<article>)

Silakan seleksi teks dibawah ini, teks bagian atas berada didalam tag <article>, sehingga background berwarna merah dengan teks putih, sedangkan dibawahnya tidak.

CSS Rulenya:

article::selection {
	background: red;
	color: #FFFFFF;
}
article::-moz-selection {
	background: red;
	color: #FFFFFF;
}

2. Contoh untuk semua element

Pada contoh diatas, hanya element <article> yang warna seleksinya berubah. Untuk merubah warna seleksi pada semua element (semua halaman web), kita tinggal menghilangkan selector didepannya, sehingga kode css nya menjadi:

::selection {
	background: red;
	color: #FFFFFF;
}
::-moz-selection {
	background: red;
	color: #FFFFFF;
}

Demikian artikel singkat mengenai cara mengubah seleksi teks pada halaman web, semoga bermanfaat.