it-swarm.com.de

Styling Texteingabe Caret

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

111
Randomblue

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/

73
Nestor Britez

"Caret" ist das gesuchte Wort. Ich glaube jedoch, dass es Teil des Browserdesigns ist und nicht in den Bereich von CSS fällt.

Hier ist jedoch eine interessante Beschreibung , die eine Caret-Änderung mit Javascript und CSS simuliert http://www.dynamicdrive.com/forums/showthread.php?t 17450) == Es scheint mir ein bisschen hacky, aber wahrscheinlich der einzige Weg, um die Aufgabe zu erfüllen. Der Hauptpunkt des Artikels ist:

Wir haben irgendwo auf dem Bildschirm eine reine Textfläche außerhalb der Sicht des Betrachters und wenn der Benutzer auf unser "falsches Terminal" klickt, werden wir uns auf die Textfläche konzentrieren und wenn der Benutzer mit der Eingabe beginnt, werden wir einfach die in die Textfläche eingegebenen Daten anhängen zu unserem "terminal" und das wars.

HIER ist eine Demo in Aktion


Update 2018

Es gibt eine neue CSS-Eigenschaft caret-color Dies gilt für die Einfügemarke eines input oder contenteditable Bereichs. Die Unterstützung wächst, aber nicht zu 100%, und dies wirkt sich nur auf die Farbe, nicht auf die Breite oder andere Erscheinungsformen aus.

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

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

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

/* 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);

Das caret-color -Eigenschaft wird von Firefox 55 und Chrome 60) unterstützt. Die Unterstützung ist auch in der Safari Technical Preview und in Opera (aber noch nicht in Edge) verfügbar. Sie können die aktuellen Support-Tabellen anzeigen hier .

36
Sacha Nacar

Hier sind einige Anbieter, die ich möglicherweise suche

::-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 Status festlegen, beispielsweise 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 daran vornehmen, 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;}
7

Es reicht aus, die Eigenschaft color zusammen mit webkit-text-fill-color zu verwenden:

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

Funktioniert in WebKit-Browsern (aber 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 Zeichen im Text an . Wenn diese Eigenschaft nicht festgelegt ist, wird der Wert der Farbeigenschaft verwendet. MDN

Das bedeutet, dass wir die Textfarbe mit der Füllfarbe und die Caret-Farbe mit der Standardfarbeigenschaft festlegen. In einem nicht unterstützten Browser haben Caret und Text dieselbe Farbe - Farbe des Caret.

3
Velda