Kształt daszka - CSS-Tricks

Anonim

caret-shapeNieruchomość w CSS zmienia kształt kursora wewnątrz elementów edytowalnych, który wskazuje użytkownik jest wpisanie. Jest to część modułu CSS Basic User Interfaces, poziom 4, który jest obecnie w wersji roboczej.

Kiedy piszę, daszek to mały migający pasek, który podąża za każdym wpisywanym znakiem.

Możemy użyć, caret-shapeaby zmienić ten pasek na coś innego, na przykład blok:

.element ( caret-shape: block; )

Spowoduje to wyświetlenie karetki, która bardziej przypomina to, co możesz zobaczyć, wpisując w wierszu poleceń:

Składnia

caret-shape: auto | bar | block | underscore
  • Wartość początkowa: auto
  • Dotyczy: elementów, które akceptują dane wejściowe
  • Odziedziczone: tak
  • Procenty: nie dotyczy
  • Wartość obliczona: określone słowo kluczowe
  • Typ animacji: według obliczonej wartości

Wartości

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

W tej chwili nie obsługujemy wielu przeglądarek caret-shape(patrz poniżej), ale oto renderowanie tych wartości.

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

Wsparcie przeglądarki

Nie wygląda na to, żeby jakiekolwiek dane były dostępne w Caniuse, ale po kilku szybkich testach, oto co znalazłem:

TO ZNACZY Brzeg Firefox Chrom Safari Opera
Nie Nie Nie Nie Nie Wszystko
Android Chrome Android Firefox Przeglądarka Android iOS Safari Opera Mobile
Nie Nie Nie Nie Nie

Możemy to „udawać”

Chociaż obsługa przeglądarki jest tym, czym jest, możemy faktycznie odtworzyć efekt za pomocą innej magii CSS.

Takich rzeczy używa się w tej animacji na maszynie do pisania:

Więcej informacji

  • Moduł podstawowego interfejsu użytkownika CSS, poziom 4 (wersja robocza)

Powiązane właściwości

Almanach z 27 stycznia 2021 r

wstawka korektorska

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