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

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.

Subscibe Now

Suka dengan artikel di Jagowebdev.com? jangan sampai ketinggalan, segera join ke milis kami untuk update informasi terbaru dari Jagowebdev.com

Komitmen Kami: Kami senantiasa menghargai privasi Anda dan tidak akan membagikan identitas Anda ke pihak manapun.

7 Feedback dari pembaca

  • Wah, ini yang saya cari-cari mas. Mohon info mas, penerapan kodenya dimana ya. Saya sudah nyoba ditaruh di style.css pada tema induk, tapi tidak work.

  • Eh, bisa ding mas. Wah, makasih sudah membantu. Tadi saya dikasih kode juga dari rekan, ternyata tidak bisa karena ada unsur p. Setelah saya makai kode dari sini:

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

    Saya taruh di style.css bagian paling bawah. Langsung bisa, langsung berubah warnanya. Thank banget mas.. Artikel ini susah dicari. Akhirnya ketemu disini.

  • mas kalau misalnya di h2 ada tulisan “Fasilitas | Dosen | Alumni” nah itu supaya setiap kata beda warna gimana ya mas???

    • Berarti masing masing harus diberi kelas tersendiri mas, misal:

      <span class="highlight-red">Fasilitas</span> | <span class="highlight-green">Dosen</span> | <span class="highlight-blue">Alumni</span>

Silakan tinggalkan komentar

Newsletter

Jadilah yang pertama tahu berita terbaru dari Jagowebdev.com

Like Us