Er möchte das Caret, die bearbeitete Frage und die Tags
stylen
Bitte ändern Sie die akzeptierte Antwort. Angesichts der neuesten CSS-Änderungen ist die aktualisierte Antwort von Michael Jasper bei weitem überlegen: stackoverflow.com/a/7339406/1889273
Boaz
Antworten:
74
Wenn Sie einen Webkit-Browser verwenden, können Sie die Farbe des Carets ändern, indem Sie dem nächsten CSS-Snippet folgen. Ich bin nicht sicher, ob es möglich ist, das Format mit CSS zu ändern.
Ein kluger Hack, aber Emoji funktionieren nicht, da sie nur vom Schatten ausgefüllt werden sim
simbolo
Hmm, in meinem Fall werden keine Schattierungen für den Effekt benötigt (Desktop Chrome und FF) - bearbeiten Sie einfach die Textfüllfarbe der Eingabe.
Velda
86
"Caret" ist das Wort, nach dem Sie suchen. Ich glaube jedoch, dass es Teil des Browser-Designs ist und nicht im Bereich von CSS liegt.
Hier ist jedoch ein interessanter Bericht über die Simulation eines Caret-Wechsels mit Javascript und CSS Artikel Http://www.dynamicdrive.com/forums/showthread.php?t=17450 Es scheint mir ein bisschen hackig zu sein, aber wahrscheinlich der einzige Weg dazu die Aufgabe erfüllen. Der Hauptpunkt des Artikels ist:
Wir haben irgendwo auf dem Bildschirm einen einfachen Textbereich außerhalb der Sicht des Betrachters. Wenn der Benutzer auf unser "gefälschtes Terminal" klickt, konzentrieren wir uns auf den Textbereich. Wenn der Benutzer mit der Eingabe beginnt, hängen wir einfach die in den Textbereich eingegebenen Daten an zu unserem "Terminal" und das ist es.
Es gibt eine neue CSS-Eigenschaft,caret-color die für das Caret eines inputoder eines contenteditableGebiets gilt. Der Träger wächst, aber nicht zu 100%, und dies wirkt sich nur auf die Farbe aus, nicht auf die Breite oder andere Erscheinungsformen.
Die caret-colorEigenschaft wird von Firefox 55 und Chrome 60 unterstützt. Unterstützung ist auch in der technischen Vorschau von Safari und in Opera verfügbar (jedoch noch nicht in Edge). Sie können die aktuellen Supporttabellen anzeigen hier .
Schlagen Sie mich bis zum Anschlag. Natürlich funktioniert diese Eigenschaft zumindest vorerst nur in Firefox und wird erst im April 2017 veröffentlicht. Siehe diese Seite.
SpyderScript
6
Hier sind einige Anbieter, nach denen ich suchen könnte
Funktioniert in WebKit-Browsern (jedoch nicht in iOS Safari, wo immer noch die Systemfarbe für Caret verwendet wird) und auch in Firefox.
Die CSS-Eigenschaft -webkit-text-fill-color gibt die Füllfarbe von
Textzeichen an . Wenn diese Eigenschaft nicht festgelegt ist, wird der Wert der Farbeigenschaft verwendet. MDN
Das heißt, wir setzen Textfarbe mit Textfüllfarbe und Caretfarbe mit Standardfarbeneigenschaft. In einem nicht unterstützten Browser haben Caret und Text dieselbe Farbe - Farbe des Carets.
<input type="text"/>
ich denkeAntworten:
Wenn Sie einen Webkit-Browser verwenden, können Sie die Farbe des Carets ändern, indem Sie dem nächsten CSS-Snippet folgen. Ich bin nicht sicher, ob es möglich ist, das Format mit CSS zu ändern.
Hier ist ein Beispiel: http://jsfiddle.net/8k1k0awb/
quelle
"Caret" ist das Wort, nach dem Sie suchen. Ich glaube jedoch, dass es Teil des Browser-Designs ist und nicht im Bereich von CSS liegt.
Hier ist jedoch ein interessanter Bericht über die Simulation eines Caret-Wechsels mit Javascript und CSS Artikel Http://www.dynamicdrive.com/forums/showthread.php?t=17450 Es scheint mir ein bisschen hackig zu sein, aber wahrscheinlich der einzige Weg dazu die Aufgabe erfüllen. Der Hauptpunkt des Artikels ist:
HIER ist eine Demo in Aktion
Update 2018
Es gibt eine neue CSS-Eigenschaft,
caret-color
die für das Caret einesinput
oder einescontenteditable
Gebiets gilt. Der Träger wächst, aber nicht zu 100%, und dies wirkt sich nur auf die Farbe aus, nicht auf die Breite oder andere Erscheinungsformen.quelle
In CSS3 gibt es jetzt eine native Möglichkeit, dies zu tun, ohne die in den vorhandenen Antworten vorgeschlagenen Hacks: die
caret-color
Eigenschaft .Es gibt eine Menge Dinge, die Sie mit dem Caret tun können, wie unten gezeigt. Es kann sogar animiert werden .
Die
caret-color
Eigenschaft wird von Firefox 55 und Chrome 60 unterstützt. Unterstützung ist auch in der technischen Vorschau von Safari und in Opera verfügbar (jedoch noch nicht in Edge). Sie können die aktuellen Supporttabellen anzeigen hier .quelle
Hier sind einige Anbieter, nach denen ich suchen könnte
Sie können auch verschiedene Zustände formatieren, z. B. den Fokus
Sie können auch bestimmte Übergänge ausführen, z
quelle
Es reicht aus, die Farbeigenschaft zusammen mit -webkit-text-fill-color folgendermaßen zu verwenden:
Funktioniert in WebKit-Browsern (jedoch nicht in iOS Safari, wo immer noch die Systemfarbe für Caret verwendet wird) und auch in Firefox.
Das heißt, wir setzen Textfarbe mit Textfüllfarbe und Caretfarbe mit Standardfarbeneigenschaft. In einem nicht unterstützten Browser haben Caret und Text dieselbe Farbe - Farbe des Carets.
quelle