ffCCBot/2.0 (http://commoncrawl.org/faq/)
Update: 11-08-2016

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.

Paragraf ini berada dalam tag <artikel> sehingga jika diseleksi akan membuat background sleksi berwarna merah dengan teks berwarna putih

Paragraf ini berada di luar tag <artikel> sehingga warna seleksi mengikuti style bawaan browser yang biasanya background biru dengan warna teks putih.

CSS Rulenya:

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

2. Contoh untuk semua element

Untuk menerapkan style seleksi ini ke semua element, kita tinggal menghilangkan selector didepannya, sehingga menjadi:

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

Demikian, semoga bermanfaat.

Recomended Post

Silakan tinggalkan komentar

Like Us

Dapatkan update artikel terbaru via E-Mail
  1. Tutorial PHP Form II: Menampilkan Hasil Input Form HTML dengan PHP
  2. Tutorial PHP Form I: Menghubungkan Form HTML dengan PHP
  3. Menampilkan Data Dari Beberapa Tabel MySQL – JOIN Pada MYSQL
  4. Memahami dan Menampilkan Tanggal dan Waktu Pada PHP
  5. Menghitung Selisih Waktu Dengan PHP – Cara Termudah
  6. Memahami Fungsi Date Pada PHP
  7. Memahami Fungsi Time, Strtotime, dan Mktime Pada PHP – Memanipulasi Waktu
  8. Memahami Zona Waktu (Timezone) dan Selisih Waktu Pada PHP
  9. Setting ODBC MySQL Untuk Gammu
  10. Cara Install dan Menggunakan Gammu di Windows