Saat membuat tampilan website, banyak developer fokus pada layout, typography, atau warna tombol, tetapi sering melupakan detail kecil seperti warna kursor teks. Padahal, cara ganti warna kursor dengan CSS sebenarnya sangat mudah dilakukan dan dapat membuat tampilan form terlihat lebih modern, profesional, serta nyaman digunakan pengguna. Kursor teks (caret) sendiri merupakan garis kecil berkedip yang muncul saat mengetik pada elemen <input> atau <textarea>.
Dalam CSS, warna kursor dapat diubah menggunakan properti caret-color tanpa JavaScript tambahan. Fitur ini sangat berguna terutama untuk website dark mode, dashboard admin, maupun desain dengan branding warna tertentu agar posisi teks lebih mudah terlihat. Pada artikel ini, kamu akan belajar cara mengubah warna kursor di CSS, memahami fungsi caret-color, hingga contoh implementasi lengkapnya.
Apa Itu Kursor dalam CSS?
Dalam pengembangan web, kursor teks (text cursor atau caret) adalah garis vertikal kecil yang berkedip pada elemen input seperti <input> dan <textarea> untuk menunjukkan posisi teks aktif saat pengguna mengetik. Menurut dokumentasi CSS modern, caret merupakan bagian dari antarmuka pengguna (user interface) yang membantu pengguna mengetahui titik pengetikan secara visual.
Pada CSS, warna caret dapat diatur menggunakan properti caret-color. Properti ini memungkinkan developer menyesuaikan warna garis pengetikan agar lebih kontras dengan background, terutama pada desain dark mode atau website dengan identitas warna tertentu.
Penting dipahami bahwa istilah cursor dalam CSS sering membingungkan pemula karena dapat merujuk pada ikon mouse maupun caret pengetikan. Padahal, properti cursor hanya digunakan untuk mengatur ikon pointer mouse, sedangkan warna garis teks diatur menggunakan caret-color.
Baca Juga: Belajar CSS #1: CSS Adalah, Pengertian Dan Praktik Terbaik
Sintaks dasar caret-color sangat sederhana:
input {
caret-color: red;
}Kode di atas akan mengubah warna kursor teks menjadi merah pada semua elemen input. Properti ini menerima berbagai jenis nilai warna CSS seperti:
- Nama warna (
red,blue,green) - HEX color (
#ff0000) - RGB/RGBA (
rgb(255,0,0)) - HSL (
hsl(0,100%,50%)) - Transparent (
transparent)
Baca Juga: Cara Mengubah Warna Placeholder HTML di Form Input
Cara Ganti Warna Kursor dengan CSS
Mengganti warna kursor di CSS sebenarnya cukup mudah karena hanya membutuhkan satu properti saja. Kamu bisa mengubah warna kursor hanya pada input tertentu, textarea tertentu, atau bahkan seluruh halaman website.
Berikut beberapa cara implementasinya:
1. Mengubah Warna Kursor Dasar
Cara paling sederhana adalah langsung menggunakan properti caret-color.
input {
caret-color: blue;
}Kode di atas akan mengubah warna caret menjadi biru pada semua input.
2. Mengubah Warna Kursor pada Input Tertentu
Jika kamu hanya ingin menerapkan warna tertentu pada class tertentu:
.input-login {
caret-color: red;
}HTML:
<input type="text" class="input-login">Pendekatan ini lebih fleksibel karena tidak memengaruhi semua elemen.
3. Mengubah Warna pada Textarea
Textarea juga mendukung properti ini:
textarea {
caret-color: green;
}Ini sangat berguna untuk halaman komentar, editor teks, atau contact form.
4. Mengubah Warna Kursor Seluruh Website
Jika ingin semua elemen input memiliki warna sama:
input,
textarea {
caret-color: purple;
}Cara ini cocok untuk menjaga konsistensi desain antarmuka.
Meskipun terlihat sederhana, penerapan yang tepat bisa membuat UI website terasa lebih profesional. Pemilihan warna juga perlu disesuaikan dengan tema visual agar tetap nyaman dipandang.
Baca Juga: Belajar CSS #2: Sintaks Dasar CSS untuk Pemula
Contoh Kode CSS Ganti Warna Kursor
Agar lebih mudah dipahami, berikut beberapa contoh implementasi CSS yang bisa langsung kamu copy ke project atau WordPress custom CSS.
Kursor Warna Merah
input {
caret-color: red;
}Cocok digunakan untuk tampilan form yang ingin terlihat lebih mencolok.
Kursor Warna Biru
textarea {
caret-color: blue;
}Biasanya digunakan pada dashboard admin atau form modern.
Menggunakan HEX Color
input {
caret-color: #00ffcc;
}Format HEX memberi fleksibilitas lebih besar untuk custom branding.
Menggunakan RGB
input {
caret-color: rgb(255, 165, 0);
}RGB memudahkan pengaturan intensitas warna.
Menggunakan CSS Variable
:root {
--warna-kursor: #ff5733;
}
input {
caret-color: var(--warna-kursor);
}Pendekatan ini sangat disarankan untuk project besar karena memudahkan pengelolaan tema warna.
Bagi developer WordPress, kode CSS ini bisa ditempatkan pada menu Appearance → Customize → Additional CSS atau melalui stylesheet tema.
Baca Juga: Belajar CSS #3: Selektor CSS, Jenis dan Contoh Penerapan
Perbandingan caret-color vs cursor di CSS
Banyak developer pemula sering salah menggunakan cursor saat sebenarnya ingin mengubah warna caret. Padahal keduanya memiliki fungsi yang sangat berbeda.
| Properti | Fungsi | Contoh |
|---|---|---|
caret-color | Mengubah warna kursor teks | caret-color: red; |
cursor | Mengubah ikon pointer mouse | cursor: pointer; |
Sebagai ilustrasi:
button {
cursor: pointer;
}Kode di atas hanya mengubah ikon mouse menjadi tangan saat hover, bukan warna garis teks.
Sedangkan:
input {
caret-color: blue;
}Kode ini mengubah warna garis pengetikan.
Kesalahan memahami perbedaan ini cukup sering terjadi, terutama bagi pemula yang baru belajar CSS. Oleh karena itu, memahami istilah dasar menjadi langkah penting sebelum melakukan styling lebih lanjut.
Baca Juga: Belajar CSS #4: Perbedaan Pseudo Class dan Pseudo Elemen
Tips Memilih Warna Kursor yang Nyaman
Memilih warna kursor tidak boleh asal menarik secara visual. Warna yang terlalu terang atau terlalu samar justru bisa mengganggu kenyamanan pengguna saat mengetik.
Beberapa tips memilih warna kursor:
- Sesuaikan dengan tema website
Website dark mode lebih cocok menggunakan warna terang seperti putih, cyan, atau hijau neon. - Pastikan kontras cukup tinggi
Jangan gunakan warna yang terlalu mirip background. - Gunakan warna brand identity
Jika website memiliki warna utama tertentu, kamu bisa menyesuaikan warna caret agar lebih konsisten. - Hindari warna terlalu mencolok
Warna neon ekstrem kadang membuat pengguna cepat lelah.
Kesimpulan
Pada pembahasan di atas dapat disimpulkan bahwa Cara ganti warna kursor dengan CSS ternyata cukup mudah karena hanya membutuhkan properti caret-color. Dengan beberapa baris kode saja, developer dapat mengubah warna caret pada elemen <input> maupun <textarea> agar tampilan website terlihat lebih konsisten, modern, dan nyaman digunakan pengguna.
Selain meningkatkan estetika desain, warna kursor yang tepat juga membantu meningkatkan pengalaman pengguna (UX), terutama pada website dark mode atau form dengan background tertentu. Karena itu, memahami penggunaan caret-color menjadi salah satu teknik styling CSS sederhana yang layak dipelajari oleh developer maupun pemula.
Artikel ini merupakan bagian dari seri BELAJAR CSS KantinIT.com. Jika artikel ini bermanfaat, jangan lupa bagikan ke media sosial atau ke teman kamu.
