Dấu mũ - Thủ thuật CSS

Mục lục

carettrong CSS là một thuộc tính viết tắt kết hợp các thuộc tính caret-colorvà caret-shapevào một khai báo duy nhất. Vì vậy, chúng tôi phải viết điều này:

.element ( caret: #ff7a18 underscore; )

… Tương tự như cách viết này:

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

Đó là một phím tắt hay khi bạn muốn thay đổi màu sắc và hình dạng của dấu mũ. Và dấu mũ, bạn hỏi là gì? Bạn có lẽ quen thuộc nhất khi nhìn thấy một biểu tượng khi nhập vào một phần tử có thể chỉnh sửa, chẳng hạn như đầu vào văn bản hoặc vùng văn bản. Tôi đang gõ bài đăng này trong WordPress, về cơ bản là một trường biểu mẫu khổng lồ và đây là dấu mũ mà tôi thấy đang nhấp nháy với tôi:

Vì vậy, bằng cách đặt caret-colorthành, nói, #ff7a18và caret-shapetương tự như vậy underscore, chúng ta có thể mong đợi thấy một cái gì đó như sau:

Cú pháp

caret: ||

Cú pháp có thể nhận giá trị này hay giá trị khác… hoặc cả hai! Nếu một giá trị trống, thì giá trị ban đầu của nó được sử dụng, autocho cả hai thuộc tính cấu thành.

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 toán: xem các thuộc tính riêng lẻ
Loại hoạt ảnh: không hoạt hình

Giá trị

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;

Hỗ trợ trình duyệt

Không có vào lúc này. Thuộc tính ban đầu được xác định trong đặc tả mô-đun giao diện người dùng cơ bản CSS cấp độ 4, hiện đang ở trong Bản nháp của người biên tập. Điều đó có nghĩa là vẫn còn chỗ cho các thay đổi được thực hiện từ bây giờ đến khi nó trở thành đề xuất cho các trình duyệt triển khai.

Trong khi chờ đợi, chúng ta có thể sắp xếp "giả mạo" thuộc carettính bằng một số phép thuật CSS khác.