Styling Texteingabe Caret

118

Ich möchte das Caret eines Fokussierten stylen <input type='text'/>. Insbesondere die Farbe und Dicke.

Zufälliges Blau
quelle
1
Nun, das ist für <input type="text"/>ich denke
Benjamin Crouzier
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.

input,
textarea {
    font-size: 24px;
    padding: 10px;

    color: red;
    text-shadow: 0px 0px 0px #000;
    -webkit-text-fill-color: transparent;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: #ccc;
    text-shadow: none;
    -webkit-text-fill-color: initial;
}

Hier ist ein Beispiel: http://jsfiddle.net/8k1k0awb/

Nestor Britez
quelle
3
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.

HIER ist eine Demo in Aktion


Update 2018

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.

input{
  caret-color: rgb(0, 200, 0);
}
<input type="text"/>

Michael Jasper
quelle
38

In CSS3 gibt es jetzt eine native Möglichkeit, dies zu tun, ohne die in den vorhandenen Antworten vorgeschlagenen Hacks: die caret-colorEigenschaft .

Es gibt eine Menge Dinge, die Sie mit dem Caret tun können, wie unten gezeigt. Es kann sogar animiert werden .

/* Keyword value */
caret-color: auto;
color: transparent;
color: currentColor;

/* <color> values */
caret-color: red;
caret-color: #5729e9;
caret-color: rgb(0, 200, 0);
caret-color: hsla(228, 4%, 24%, 0.8);

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 .

Sacha Nacar
quelle
1
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

::-webkit-input-placeholder {color: tomato}
::-moz-placeholder          {color: tomato;} /* Firefox 19+ */
:-moz-placeholder           {color: tomato;} /* Firefox 18- */
:-ms-input-placeholder      {color: tomato;}

Sie können auch verschiedene Zustände formatieren, z. B. den Fokus

:focus::-webkit-input-placeholder {color: transparent}
:focus::-moz-placeholder          {color: transparent}
:focus:-moz-placeholder           {color: transparent}
:focus:-ms-input-placeholder      {color: transparent}

Sie können auch bestimmte Übergänge ausführen, z

::-VENDOR-input-placeholder       {text-indent: 0px;   transition: text-indent 0.3s ease;}
:focus::-VENDOR-input-placeholder  {text-indent: 500px; transition: text-indent 0.3s ease;}
Sergey Khmelevskoy
quelle
5
Dies ist nützlich für die Gestaltung des Placholder-Textes, jedoch nicht für das blinkende Caret, auf das sich das OP bezieht.
craignewkirk
4

Es reicht aus, die Farbeigenschaft zusammen mit -webkit-text-fill-color folgendermaßen zu verwenden:

    input {
        color: red; /* color of caret */
        -webkit-text-fill-color: black; /* color of text */
    }
<input type="text"/>

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.

Velda
quelle