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

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/

"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"/>

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 .

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;}

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.