DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
Die CSS-Eigenschaft caret-shape ändert die Form des Textcursors in editierbaren Elementen, der anzeigt, dass ein Benutzer tippt. Sie ist Teil des CSS Basic User Interfaces Module Level 4, das sich derzeit im Status eines Arbeitsentwurfs befindet.
Während ich schreibe, ist der Cursor der kleine blinkende Balken, der jedem Zeichen folgt, das ich eingebe.
Wir können caret-shape verwenden, um diesen Balken in etwas anderes zu ändern, z. B. in einen Block.
.element {
caret-shape: block;
}Das erzeugt einen Cursor, der eher dem ähnelt, was man beim Tippen in der Befehlszeile sehen könnte.
Syntax
caret-shape: auto | bar | block | underscore- Anfangswert:
auto - Gilt für: Elemente, die Eingaben akzeptieren
- Vererbt: ja
- Prozentwerte: n/v
- Berechneter Wert: angegebenes Schlüsselwort
- Animationstyp: nach berechnetem Wert
Werte
caret-shape: auto;
caret-shape: bar;
caret-shape: block;
caret-shape: underscore;Wir haben derzeit keine große Browserunterstützung für caret-shape (siehe unten), aber hier ist eine Darstellung dieser Werte.
caret-shape: bar;caret-shape: block;
caret-shape: underscore;Browser-Unterstützung
Es scheint keine Daten in Caniuse verfügbar zu sein, aber nach einigen schnellen Tests habe ich Folgendes herausgefunden:
| IE | Edge | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| Nein | Nein | Nein | Nein | Nein | Alle |
| Android Chrome | Android Firefox | Android Browser | iOS Safari | Opera Mobile |
|---|---|---|---|---|
| Nein | Nein | Nein | Nein | Nein |
Wir können dies "fälschen".
Obwohl die Browserunterstützung so ist, wie sie ist, können wir den Effekt tatsächlich mit anderen CSS-Tricks reproduzieren.
Das ist die Art von Sache, die bei dieser Schreibmaschinenanimation verwendet wird.
Weitere Informationen
- CSS Basic User Interface Module Level 4 (Arbeitsentwurf)
