Bentuk karet - Trik CSS

Anonim

The caret-shapeharta di CSS perubahan bentuk kursor teks dalam elemen disunting yang menunjukkan pengguna sedang menaip. Ini adalah sebahagian daripada Modul Antara Muka Pengguna Asas CSS Tahap 4, yang kini dalam status Draf Kerja.

Semasa saya menulis, karet adalah bar berkelip kecil yang mengikuti setiap watak yang saya taip.

Kita boleh gunakan caret-shapeuntuk menukar bar itu kepada yang lain seperti, katakanlah, blok:

.element ( caret-shape: block; )

Itu akan menghasilkan karet yang lebih menyerupai yang mungkin anda lihat semasa menaip di baris arahan:

Sintaks

caret-shape: auto | bar | block | underscore
  • Nilai awal: auto
  • Berlaku untuk: elemen yang menerima input
  • Diwarisi: ya
  • Peratusan: n / a
  • Nilai dikira: kata kunci yang ditentukan
  • Jenis animasi: mengikut nilai yang dikira

Nilai

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

Kami tidak mempunyai banyak sokongan penyemak imbas buat caret-shapemasa ini (lihat di bawah), tetapi berikut adalah gambaran nilai tersebut.

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

Sokongan penyemak imbas

Nampaknya tidak ada data yang tersedia di Caniuse, tetapi dengan beberapa ujian pantas, inilah yang saya dapati:

IE Hujung Firefox Chrome Safari Opera
Tidak Tidak Tidak Tidak Tidak Semua
Android Chrome Android Firefox Penyemak Imbas Android Safari iOS Opera Mudah Alih
Tidak Tidak Tidak Tidak Tidak

Kita boleh "palsu" ini

Walaupun sokongan penyemak imbas adalah apa adanya, kita sebenarnya dapat meniru kesannya dengan keajaiban CSS yang lain.

Itulah jenis perkara yang digunakan pada animasi mesin taip ini:

Maklumat lanjut

  • Modul Antara Muka Pengguna Asas CSS Tahap 4 (Draf Kerja)

Harta yang berkaitan

Almanak pada 27 Jan 2021

permaidani

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