Tips dan Trik HTML / CSS

Mencegah seleksi cursor pada teks

Demo : Mencegah seleksi pada teks

Teks dibawah ini tidak bisa di seleksi dengan cursor.

Teks ini tidak bisa di-select dengan cursor.

<strong>Mencegah seksi pada teks</strong>
<p>Teks dibawah ini tidak bisa di seleksi dengan cursor.</p>
<p class="prevent-select">Teks ini tidak bisa di-select dengan cursor.</p>

.prevent-select {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

Hasil ganti warna pada kolom input:

<form> <input id='merah' type="text" placeholder="Teks warna merah.."></form>
<form> <input id='biru' type="text" placeholder="Teks warna biru.."></form>
<form> <input id='hijau' type="text" placeholder="Teks warna hijau.."></form>

::placeholder {
  color: red;
  opacity: 1; /* Firefox */
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
 color: red;
}
::-ms-input-placeholder { /* Microsoft Edge */
 color: red;
}

Clearfix

Elemen dengan float seringkali berdampak terhadap tata letaknya dan bahkan terhadap elemen lain yang berada dibawahnya.
Perhatikan contoh elemen folat dibawa ini.

Ini adalah contoh tampilan elemen float tanpa CSS clearfix.

Float

Ini adalah tampilan setelah menggunakan CSS clearfix, .

Float

Dibawah ini kode HTML untuk contoh elemen float diatas.

  <div style='border:2px solid red;padding:5px'>
    <p>Ini adalah contoh tampilan elemen float tanpa CSS clearfix.</p>
  <div class='float-right'>Float</div>
  </div>

  <div class='clearfix' style='border:2px solid red;padding:5px'>
    <p>Ini adalah tampilan setelah menggunakan CSS clearfix, .</p>
  <div class='float-right'>Float</div>
  </div>

Kode CSS untuk mengatasi efek elemen yang di float.

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

Tombol mode Gelap/Terang

Klik tombol ini untuk mengubah mode.

<!-- HTML tombol MODE Gelap -->
<button onclick="changeMode()">TOMBOL</button>

<!-- CSS MODE Gelap -->
<style>

.dark-mode {
  background-color: black;
  color: white;
}

</style>

<script>
function changeMode() {
   var element = document.body;
   element.classList.toggle("mode-gelap");
}
</script>