Trik Mengubah Warna Seleksi dengan CSS

22/01/2018    Risman Hakim    485     Website

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.

HTML CSS, Tips dan Trik, website

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