Memberi Warna Teks yang di Blok dengan CSS

Secara default, hampir semua browser akan menampilkan background warna biru dan teks warna putih ketika melakukan blok pada teks yang dipilih pada halaman suatu website. Namun, Anda bisa merubah warna background dan teks yang di blok sesuai dengan keinginan Anda. Caranya adalah dengan menambahkan CSS selector ::selection atau ::-moz-selection.

CSS Text Selection

::-moz-selection {		/* Firefox */
	background: #eb374b;
	color: #fff;
}
::selection {			/* Chrome, Safari, IE9, Opera */
	background: #eb374b;
	color: #fff;
}

::-moz-selection digunakan khusus untuk digunakan untuk Mozilla Firefox. Sedangkan ::selection digunakan untuk browser-browser selain Mozilla Firefox, seperti Google Chrome, Safari, IE9, dan Opera. Perlu diketahui ::selection/::-moz-selection hanya bisa menampilkan beberapa CSS property saja, yaitu color, background dan background-color.

Let’s do it

Kita akan membuat beberapa paragraf, dan setiap paragraf akan memiliki warna background dan teks yang berbeda ketika di blok. Langkah pertama kita buat semantik HTML seperti berikut.

<h2>Warna teks yang di blok berikut adalah <span class="red">Merah</span></h2>

<p class="red">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<h2>Warna teks yang di blok berikut adalah <span class="yellow">Kuning</span></h2>

<p class="yellow">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<h2>Warna teks yang di blok berikut adalah <span class="green">Hijau</span></h2>

<p class="green">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Kemudian kita atur style ::selection/::-moz-selection dengan menggunkan CSS.

p.red::-moz-selection {		/* Firefox */
	background: #eb374b;
	color: #fff;
}
p.red::selection {		/* Chrome, Safari, IE9, Opera */
	background: #eb374b;
	color: #fff;
}
p.yellow::-moz-selection {	/* Firefox */
	background: #fc0;
	color: #000;
}
p.yellow::selection  {		/* Chrome, Safari, IE9, Opera */
	background: #fc0;
	color: #000;
}
p.green::-moz-selection {	/* Firefox */
	background: #093;
	color: #fff;
}
p.green::selection {		/* Chrome, Safari, IE9, Opera */
	background: green;
	color: #fff;
}

Demo

Download

Selamat mencoba, dan Mari Belajar, Mari Berbagi Ilmu.

One thought on “Memberi Warna Teks yang di Blok dengan CSS

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s