CSS Selection/CSS Seleksi sanggup dipakai untuk mempercantik tampilan teks-teks yang terseleksi. Secara umum, tampilan teks yang terseleksi akan diliputi dengan latar belakang berwarna biru dan warna teks berwarna putih, namun dengan CSS seleksi, kau sanggup mendapat efek teks terseleksi yang beraneka ragam.
Kode CSS
Selektor dan deklarasi CSS Selection sanggup dituliskan ibarat ini:
::selection {background:#3C993C;color:#FFB46A;text-shadow:none;} /* Safari & Chrome */ ::-moz-selection {background:#3C993C;color:#FFB46A;text-shadow:none;} /* Firefox */background:#3C993C; dipakai untuk memilih warna latar belakang teks terseleksi, sedangkan color:#FFB46A; dipakai untuk memilih warna teks terseleksi. Deklarasi text-shadow:none; bekerjsama tidak terlalu penting, namun dalam browser Chrome, CSS Text Shadow terkadang juga ikut terlibat dalam teks-teks terseleksi. Hal ini tentunya akan menciptakan hasil tampilan menjadi kurang sempurna. Untuk itu diterapkanlah deklarasi text-shadow:none; untuk menetralkan tampilannya.
Demonstrasi CSS Selection
CSS Seleksi merupakan salah satu anggota dari CSS3 Pseudo-Element. Oleh lantaran itu, kita juga sanggup menerapkan CSS Seleksi ini pada area tertentu saja. Bahkan, dengan wangsit ini kita juga sanggup menciptakan sebuah sistem sederhana untuk melindungi konten halaman artikel kita (atau lebih tepatnya: seakan-akan melindungi).
Melindungi Konten Artikel dengan CSS Selection
Untuk melindungi konten artikel dengan CSS Seleksi, yang kita butuhkan yaitu dua buah penerapan deklarasi CSS. Deklarasi yang pertama kita gunakan untuk menyatakan efek seleksi secara umum (keseluruhan), sedangkan deklarasi yang ke dua kita gunakan untuk menyatakan efek seleksi pada area khusus saja:
Letakkan baris instruksi ini di atas ]]></b:skin> atau </style>
/* LINDUNGI ARTIKEL DENGAN CSS SELEKSI - http://www.dte.web.id -------------------------------------------- Nyatakan bahwa semua elemen akan tampak sama ketika terseleksi. Deklarasi-deklarasi di bawah ini akan memperlihatkan kesan seakan-akan teks tidak sanggup diseleksi */ ::selection { background:transparent !important; color:#222; /* samakan dengan warna teks */ } ::-moz-selection { background:transparent !important; color:#222; /* samakan dengan warna teks */ } /* ----------------------------------------- Nyatakan bahwa elemen-elemen yang berada di dalam tag <code>, <textarea> dan <input> sanggup diseleksi */ code::selection, textarea::selection, input::selection { background:red; color:white; text-shadow:none; } code::-moz-selection, textarea::-moz-selection, input::-moz-selection { background:red; color:white; text-shadow:none; }Hasil Akhir Setelah Teks Dilindungi
Seleksi teks ini! Seleksi teks ini! Seleksi teks ini! Seleksi teks ini! Seleksi teks ini! Seleksi teks ini! Seleksi teks ini! Seleksi teks ini! Seleksi teks ini! Seleksi teks ini! Seleksi teks ini! Seleksi teks ini! Seleksi teks ini! Seleksi teks ini! Seleksi teks ini! Seleksi teks ini! Seleksi teks ini! Seleksi teks ini! Seleksi teks ini! Seleksi teks ini! Seleksi teks ini! Seleksi teks ini! Seleksi teks ini! Seleksi teks ini! Seleksi teks ini!
Meskipun hasil tamat area di atas memperlihatkan bahwa teks yang berada di luar tag <code> tidak sanggup diseleksi, namun bekerjsama semua teks tersebut sanggup di seleksi. Hanya saja tampilan teks terseleksi yang berada di luar area <code> ... </code> telah diatur biar warna latar belakang tetap transparan dan warna teks tetap sama dengan warna teks dalam keadaan normal, sehingga seakan-akan teks tersebut tidak sanggup diseleksi.
Dukungan Browser
| Browser | Versi Paling Lama | Mendukung |
|---|---|---|
| Internet Explorer | 9 | ::selection |
| Firefox (Gecko) | 1.0 (1.5) | ::-moz-selection |
| Opera | 9.5 | ::selection |
| Safari (WebKit) | 1.1 (100) | ::selection |