Bentuk sisipan - Trik CSS

Anonim

The caret-shapeproperti di CSS mengubah bentuk kursor teks di dalam elemen dapat diedit yang menunjukkan pengguna mengetik. Ini adalah bagian dari Modul Antarmuka Pengguna Dasar CSS Tingkat 4, yang saat ini berstatus Konsep Kerja.

Saat saya menulis, tanda sisipan adalah bilah kecil yang berkedip yang mengikuti setiap karakter yang saya ketik.

Kita dapat menggunakan caret-shapeuntuk mengubah bilah itu menjadi sesuatu yang lain seperti, katakanlah, satu blok:

.element ( caret-shape: block; )

Itu akan menghasilkan tanda sisipan yang lebih seperti yang mungkin Anda lihat saat mengetik di baris perintah:

Sintaksis

caret-shape: auto | bar | block | underscore
  • Nilai awal: auto
  • Berlaku untuk: elemen yang menerima input
  • Diwariskan: ya
  • Persentase: n / a
  • Nilai yang dihitung: kata kunci tertentu
  • Jenis animasi: menurut nilai yang dihitung

Nilai

caret-shape: auto; caret-shape: bar; caret-shape: block; caret-shape: underscore;

Kami tidak memiliki banyak dukungan browser untuk caret-shapesaat ini (lihat di bawah), tetapi berikut adalah rendering dari nilai-nilai tersebut.

caret-shape: bar;
caret-shape: block;
caret-shape: underscore;

Dukungan browser

Sepertinya tidak ada data yang tersedia di Caniuse, tetapi dengan beberapa pengujian cepat, inilah yang saya temukan:

YAITU Tepi Firefox Chrome Safari Opera
Tidak Tidak Tidak Tidak Tidak Semua
Android Chrome Android Firefox Browser Android iOS Safari Opera Mobile
Tidak Tidak Tidak Tidak Tidak

Kita bisa "memalsukan" ini

Meskipun dukungan browser adalah apa adanya, kami sebenarnya dapat mereplikasi efeknya dengan sihir CSS lainnya.

Itulah yang digunakan pada animasi mesin tik ini:

Informasi lebih lanjut

  • Modul Antarmuka Pengguna Dasar CSS Level 4 (Konsep Kerja)

Properti terkait

Almanak pada 27 Januari 2021

tanda sisipan

.element ( caret: #ff7a18 underscore; ) Chris Coyier