Cara Ganti Warna Kursor Teks Input dengan CSS

Ganti warna kursor teks pada elemen input dapat mempercantik tampilan form di website Anda.

Dengan CSS (Cascading Style Sheets), Anda bisa menyesuaikan warna kursor agar sama dengan tema website. Masih bingung bagian mana sih yang diganti?

Pada artikel kali ini saya akan membahas bagaiman cara ganti warna kursor teks input menggunakan properti CSS caret-color dengan mudah dan cepat.

Apa Itu Caret Color di CSS?

Properti caret-color di CSS digunakan untuk menentukan warna kursor teks (caret) pada elemen input, textarea, atau konten yang bisa diedit.

Biasanya, warna defaultnya mengikuti warna teks. Namun, dengan properti ini, Anda dapat menggantinya sesuai keinginan.

Sebenarnya pada kondisi atau bagian mana sih yang diganti warnanya? Nah, warna kursor teks input yang dimaksud adalah ketika Anda mengeklik elemen input nantinya ada kursor teks yang berkedip.

Biasanya itu warnanya hitam, dan sebenarnya tidak hanya di elemen input saja loh. Elemen lain seperti textarea juga akan muncul kursor teks ini.

Kalau masih bingung lihat gambar dibawah ini ya:

Cara Ganti Warna Kursor Teks

Seperti yang sudah dikatakan sebelumnya, bahwa tidak hanya elemen input saja yang dapat diganti, textarea juga bisa.

Jadi ini cara mudah ganti warna kursor teks. Contoh sederhana penggunaan caret-color di CSS:

input {
  caret-color: red;
}

textarea {
  caret-color: red;
}

Kode di atas akan mengubah warna kursor teks menjadi merah pada semua elemen input di halaman Anda.

Baca juga: Jenis-jenis Satuan Ukuran di CSS

Hasilnya jadi seperti ini:

Anda juga bisa menargetkan elemen input tertentu dengan selector agar warna kursor hanya berubah pada bagian tertentu saja.

Contoh kodenya seperti ini:

input[type="text"] {
  caret-color: #00bfff;
}

.form textarea {
  caret-color: #ff6600;
}

Kode CSS tersebut memberikan warna biru muda pada input teks dan oranye pada textarea. Gunakan kode hex, RGB, atau nama warna sesuai kebutuhan desain.

Bisa tidak digunakan pada pseudo-class lain di CSS? tentunya bisa dong, bisa pakai :focus, :active dan lain sebagainya.

Berikut ini contoh sederhananya:

input:focus {
  caret-color: #00ff99;
}

Dengan kode ini, warna kursor akan berubah menjadi hijau neon saat input aktif atau pada saat di klik.

Cara lain juga dapat Anda lakukan seperti mengkombinasikan dengan merubah warna border elemen input atau textarea. Atau bisa juga menambahkan ganti warna placeholder sekalian.

input {
  color: #333;
  border: 1px solid #ccc;
  caret-color: #ff4081;
}

input:focus {
  border-color: #ff4081;
  outline: none;
}

Mengatasi Masalah Browser Compatibility

Sebagian besar browser modern seperti Chrome, Edge, dan Firefox sudah mendukung properti CSS caret-color.

Namun sayangnya, jika Anda menargetkan pengguna Safari lama atau Internet Explorer, properti ini mungkin tidak berfungsi.

Untuk itu, pastikan Anda menyediakan desain fallback agar form tetap terlihat konsisten.

Kesimpulan

Ganti warna kursor teks input dengan CSS sangat mudah apabila menggunakan properti caret-color di CSS.

Selain mempercantik tampilan form, perubahan ini juga meningkatkan pengalaman pengguna. Pastikan Anda memilih warna yang sesuai dengan tema desain dan mudah terlihat oleh pengguna.

Dengan CSS sederhana, Anda bisa membuat detail kecil seperti warna kursor menjadi bagian dari estetika situs web yang profesional dan konsisten.