Hình dấu mũ - Thủ thuật CSS

Anonim

Các caret-shapebất động sản trong CSS thay đổi hình dạng của con trỏ văn bản bên trong các yếu tố có thể chỉnh sửa cho biết một người dùng đang gõ. Đây là một phần của Mô-đun Giao diện Người dùng Cơ bản CSS Cấp độ 4, hiện đang ở trạng thái Bản thảo đang làm việc.

Khi tôi viết, dấu mũ là thanh nhấp nháy nhỏ theo sau mỗi ký tự tôi nhập.

Chúng tôi có thể sử dụng caret-shapeđể thay đổi thanh đó thành một cái gì đó khác, chẳng hạn như một khối:

.element ( caret-shape: block; )

Điều đó sẽ tạo ra một dấu mũ giống như những gì bạn có thể thấy khi nhập vào dòng lệnh:

Cú pháp

caret-shape: auto | bar | block | underscore
  • Giá trị ban đầu: auto
  • Áp dụng cho: các phần tử chấp nhận đầu vào
  • Kế thừa: có
  • Phần trăm: n / a
  • Giá trị được tính: từ khóa được chỉ định
  • Loại hoạt ảnh: theo giá trị được tính

Giá trị

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

Hiện tại, chúng tôi không có nhiều hỗ trợ trình duyệt caret-shape(xem bên dưới), nhưng đây là kết xuất của các giá trị đó.

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

Hỗ trợ trình duyệt

Có vẻ như không có bất kỳ dữ liệu nào có sẵn trong Caniuse, nhưng với một số thử nghiệm nhanh, đây là những gì tôi tìm thấy:

I E Cạnh Firefox Trình duyệt Chrome Safari Opera
Không Không Không Không Không Tất cả
Chrome dành cho Android Android Firefox Trình duyệt Android iOS Safari Opera Mobile
Không Không Không Không Không

Chúng tôi có thể "giả mạo" cái này

Mặc dù hỗ trợ trình duyệt là như vậy, nhưng chúng tôi thực sự có thể tái tạo hiệu ứng bằng phép thuật CSS khác.

Đó là thứ được sử dụng trên hoạt hình máy đánh chữ này:

Thêm thông tin

  • Mô-đun giao diện người dùng cơ bản CSS cấp 4 (Bản thảo đang làm việc)

Thuộc tính liên quan

Almanac vào ngày 27 tháng 1 năm 2021

dấu mũ

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