Trik Mengubah Warna Seleksi dengan CSS

Trik Mengubah Warna Seleksi dengan CSS - Pasti kalian sudah tidak asing lagi dengan yang namanya menyeleksi suatu elemen ketika berselancar didunia maya, misalnya saja ketika kita melakukan copy paste suatu paragraf, tentu kita akan melakukan seleksi terlebih dahulu untuk memilih elemen. Pada saat seleksi elemen terdapat warna bakground default yakni berwarna biru muda yang menandakan bahwa elemen telah diseleksi. Namun apakah kalian tahu bahwa warna seleksi bisa kita manipulasi ? Dengan CSS kita bisa bisa memanipulasi warna background seleksi, bagaimana caranya ? Simak Trik Mengubah Warna Seleksi dengan CSS berikut ini.

Berikut ini akan saya contohkan kasus seleksi elemen dengan mengubah warna background seleksinya, silahkan ketikan baris sintak berikut untuk melihat demo seleksinya.

<body>
  <div id="wrapper">
    <h1>Silahkan Seleksi Teks dibawah ini :</h1>
    <h2 class="emerald">Seleksi element ini akan berwarna <span>Emerald</span></h2>
    <h2 class="turquoise">Seleksi element ini akan berwarna <span>Turquoise</span></h2>
    <h2 class="amethyst">Seleksi element ini akan berwarna <span>Amethyst</span></h2>
    <h2 class="alizarin">Seleksi element ini akan berwarna <span>Clizarin</span></h2>
    <h2 class="carrot">Seleksi element ini akan berwarna <span>Carrot</span></h2>
    <h2 class="concrete">Seleksi element ini akan berwarna <span>Concrete</span></h2>
    <h2 class="sunFlower">Seleksi element ini akan berwarna <span>Sun Flower</span></h2>
  </div>
</body>

Setelah mengetikan sintak diatas, selanjutnya adalah memanipulasi warna seleksi dengan sintak CSS berikut ini.

@import url('https://fonts.googleapis.com/css?family=Concert+One');
#wrapper {
  width: 600px;
  margin: auto;
  padding: 10px;
  border: 2px solid #aaa;
  font-family: 'Concert One', cursive;
}

h2 {
 
  font-size: 1.6rem;
  --selectionColor: #3297fd;
}

h2::-moz-selection,
h2 span,
h2 span::-moz-selection {
  background-color: var(--selectionColor);
}

.emerald {
  --selectionColor: #2ecc71;
}

.turquoise {
  --selectionColor: #1abc9c;
}

.amethyst {
  --selectionColor: #9b59b6;
}

.alizarin {
  --selectionColor: #e74c3c;
}

.carrot {
  --selectionColor: #e67e22;
}

.concrete {
  --selectionColor: #95a5a6;
}

.sunFlower {
  --selectionColor: #f1c40f;
}

Pada sintak diatas kita tahu bahwa kita telah mengubah warna default seleksi dengan warna yang telah kita tentukan diatas. setelah mengetikan semua sintak diatas, kalian bisa mencoba mempraktekannya dengan cara membuka browser dan seleksi salah satu elemen yang ada, maka akan terjadi perubahan warna pada saat menyeleksi elemen tersebut.
Baik, itulah tadi Trik Mengubah Warna Seleksi dengan CSS, semoga bermanfaat dan selamat mencoba.

22 Januari 2018

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat