Voglio modellare il cursore di un concentrato <input type='text'/>. Nello specifico, il colore e lo spessore.

Se stai usando un browser webkit puoi cambiare il colore del cursore seguendo lo snippet CSS successivo. Non sono sicuro che sia possibile cambiare il formato con CSS.

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:
    text-shadow: none;
    -webkit-text-fill-color: initial;
}

Ecco un esempio: http://jsfiddle.net/8k1k0awb/

"Caret" è la parola che stai cercando. Credo però che faccia parte del design del browser e non sia a portata di css.

Tuttavia, ecco un articolo interessante sulla simulazione di un cambio di accento circonflesso usando Javascript e CSS http://www.dynamicdrive.com/forums/showthread.php?t=17450 Mi sembra un po 'complicato, ma probabilmente l'unico modo per portare a termine il compito. Il punto principale dell'articolo è:

Avremo una semplice textarea da qualche parte nello schermo fuori dalla vista del visualizzatore e quando l'utente fa clic sul nostro "falso terminale" ci concentreremo sulla textarea e quando l'utente inizia a digitare aggiungeremo semplicemente i dati digitati nella textarea al nostro "terminale" e basta.

QUI è una demo in azione

Aggiornamento 2018

C'è una nuova proprietà CSScaret-color che si applica all'accento circonflesso di un'area inputo contenteditable. Il supporto sta crescendo ma non del 100%, e questo influisce solo sul colore, non sulla larghezza o su altri tipi di aspetto.

input{
  caret-color: rgb(0, 200, 0);
}

<input type="text"/>

In CSS3, ora c'è un modo nativo per farlo, senza nessuno degli hack suggeriti nelle risposte esistenti: la caret-colorproprietà .

Ci sono molte cose che puoi fare con il cursore, come mostrato di seguito. Può anche essere animato .

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

La caret-colorproprietà è supportata da Firefox 55 e Chrome 60. Il supporto è disponibile anche in Safari Technical Preview e in Opera (ma non ancora in Edge). È possibile visualizzare le tabelle di supporto correnti qui .

Ecco alcuni fornitori che potresti cercare

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

Puoi anche definire stati diversi, ad esempio focus

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

Puoi anche fare alcune transizioni su di esso, come

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

È sufficiente utilizzare la proprietà color insieme a -webkit-text-fill-color in questo modo:

    input {
        color: red; /* color of caret */
        -webkit-text-fill-color: black; /* color of text */
    }

<input type="text"/>

Funziona nei browser WebKit (ma non in iOS Safari, dove viene ancora utilizzato il colore di sistema per il cursore) e anche in Firefox.

La proprietà CSS -webkit-text-fill-color specifica il colore di riempimento dei caratteri del testo . Se questa proprietà non è impostata, viene utilizzato il valore della proprietà color. MDN

Quindi questo significa che impostiamo il colore del testo con il colore di riempimento del testo e il colore del cursore con la proprietà del colore standard. In un browser non supportato, il cursore e il testo avranno lo stesso colore - colore del cursore.