Selector Selection dan Placeholder pada CSS

28/10/2019    Risman Hakim    61     Website

Selector Selection dan Placeholder pada CSS - Dengan selector CSS kita bisa dengan mudah melakukan style terhadap elemen yang dipilih, contoh umum selector yang biasa kita gunakan adalah id, class, tag. Namun penggunaan selector bukan hanya id, class, dan tag saja tetapi ada banyak selector yang bisa kita gunakan, seperti selector yang akan saya bahas kali ini yaitu selector Selection dan Placeholder.

  • Selection adalah selector yang bisa kita gunakan untuk merubah style seleksi pada suatu konten. Contohnya kita ingin merubah style mark seleksi pada paragraf dengan warna yang kita inginkan.
  • Placeholder adalah selector yang bisa kita gunakan untuk merubah teks placeholder. Contohnya adalah merubah warna teks, merubah jenis font, ukuran teks placeholder.

1. Kode Selector Selection 

::selection {
  style CSS;

2. Kode Selector Placeholder

::placeholder {
  style CSS;

Selanjutnya bagaimana cara penggunaannya ? jangan khawatir.. saya akan contohkan bagaimana cara penggunaan selector Selection dan Placeholder agar teman - teman bisa lebih mengerti.

Silahkan teman - teman bisa membuat file index.html dan mengetikan kode HTML dan CSS berikut untuk mengaplikasikan penggunaan selector Selection dan Placeholder pada suatu elemen.

<head>
    <title>Selector Selection dan Placeholder pada CSS</title>
    <style>
        /* Selector Placeholder */
        input {
            padding: 5px;
        }
        ::placeholder {
            color: darkcyan;
        }
        /* Selector Selection */
        ::selection {
            color: white;
            background: salmon;
        }
    </style>
</head>
<body>
    <input type="text" placeholder="Your name">
    <input type="text" placeholder="Your email">
    <h3>DUMET School</h3>
    <p>DUMET School adalah lembaga kursus yang bergerak di bidang pendidikan khususnya kursus website, digital marketing, dan desain grafis. Sampai saat ini DUMET School sudah memiliki lulusan lebih dari 8000 orang dari berbagai status dan profesi mulai dari pelajar sekolah, mahasiswa, guru, dosen, staff profesional, freelancer, dll.</p>
</body>

Dari kode diatas, telah diaplikasikan masing - masing dari selector Selection dan Placeholder, dimana selector Selection diaplikasikan pada elemen input dan selector pada konten paragraf.

Nah, semoga dari penjelasan dan contoh penggunaan selector Selection dan Placeholde diatas teman - teman bisa mengerti. Baca juga pembahasan selector CSS lainnya yaitu Cara Penggunaan CSS Before dan After. Baiklah, cukup sekian pembahasan CSS tentang Selector Selection dan Placeholder pada CSS. Semoga bermanfaat 

HTML CSS

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More