Tanda sisipan - Trik CSS | CSS Almanak 2025

caretdi CSS adalah properti singkatan yang menggabungkan properti caret-colordan caret-shapemenjadi satu deklarasi. Jadi, kita bisa menulis ini:

.element ( caret: #ff7a18 underscore; )

… Yang mirip dengan menulis ini:

.element ( caret-color: #ff7a18; caret-shape: underscore; )

Itu jalan pintas yang bagus saat Anda ingin mengubah warna dan bentuk tanda sisipan. Dan apa itu tanda sisipan, Anda bertanya? Anda mungkin paling familiar melihatnya saat mengetik ke dalam elemen yang dapat diedit, seperti input teks atau textarea. Saya mengetik posting ini di WordPress, yang pada dasarnya adalah satu bidang formulir raksasa, dan ini adalah tanda sisipan yang saya lihat berkedip pada saya:

Jadi, dengan menyetel caret-colorke, katakan #ff7a18,, dan caret-shapeke sesuatu seperti underscore, kita mungkin berharap untuk melihat sesuatu seperti ini:

Sintaksis

caret: ||

Sintaks dapat mengambil satu nilai atau lainnya… atau keduanya! Jika suatu nilai kosong, maka nilai awalnya digunakan, yang autountuk kedua properti konstituen.

Awal: auto
Berlaku untuk: elemen yang menerima input
Diwariskan: ya
Persentase: n / a
Nilai yang dihitung: lihat properti individu
Jenis animasi: tidak dapat dianimasikan

Nilai

caret: #ff7a18 underscore; caret: yellow block; caret: hsla(50, 100%, 50%, 0.75) bar; /* Keyword color values */ caret: auto; caret: transparent block; caret: currentcolor underscore; /* Global values */ caret: inherit; caret: initial; caret: unset;

Dukungan browser

Tidak ada saat ini. Properti ini awalnya ditentukan dalam spesifikasi CSS Basic User Interface Module Level 4, yang saat ini ada dalam Draf Editor. Itu berarti masih ada ruang untuk perubahan yang harus dilakukan antara sekarang dan saat ini menjadi rekomendasi untuk diterapkan oleh browser.

Sementara itu, kita dapat menyortir "memalsukan" caretproperti dengan sihir CSS lainnya.