Je veux styler le caret d'un concentré <input type='text'/>. Plus précisément, la couleur et l'épaisseur.

Si vous utilisez un navigateur Webkit, vous pouvez changer la couleur du curseur en suivant l'extrait de code CSS suivant. Je ne sais pas s'il est possible de changer le format avec 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;
}

Voici un exemple: http://jsfiddle.net/8k1k0awb/

«Caret» est le mot que vous recherchez. Je crois cependant que cela fait partie de la conception des navigateurs et n'est pas à la portée du CSS.

Cependant, voici un article intéressant sur la simulation d'un changement de curseur en utilisant Javascript et CSS http://www.dynamicdrive.com/forums/showthread.php?t=17450 Cela me semble un peu piraté, mais probablement le seul moyen de accomplir la tâche. Le point principal de l'article est:

Nous aurons une zone de texte brut quelque part dans l'écran hors de la vue du spectateur et lorsque l'utilisateur cliquera sur notre "faux terminal", nous nous concentrerons sur la zone de texte et lorsque l'utilisateur commencera à taper, nous ajouterons simplement les données saisies dans la zone de texte à notre "terminal" et c'est tout.

ICI est une démo en action

Mise à jour 2018

Il existe une nouvelle propriété csscaret-color qui s'applique au curseur d'une zone inputou contenteditable. Le support croît mais pas à 100%, et cela n'affecte que la couleur, pas la largeur ou d'autres types d'apparence.

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

<input type="text"/>

En CSS3, il existe maintenant une manière native de le faire, sans aucun des hacks suggérés dans les réponses existantes: la caret-colorpropriété .

Vous pouvez faire beaucoup de choses avec le curseur, comme indiqué ci-dessous. Il peut même être animé .

/* 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-colorpropriété est prise en charge à partir de Firefox 55 et Chrome 60. La prise en charge est également disponible dans l'aperçu technique Safari et dans Opera (mais pas encore dans Edge). Vous pouvez consulter les tableaux de support actuels ici .

Voici quelques fournisseurs que vous pourriez rechercher

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

Vous pouvez également styliser différents états, tels que la mise au point

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

Vous pouvez également y effectuer certaines transitions, comme

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

Il suffit d'utiliser la propriété color avec -webkit-text-fill-color de cette façon:

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

<input type="text"/>

Fonctionne dans les navigateurs WebKit (mais pas dans iOS Safari, où la couleur système est toujours utilisée pour le caret) et aussi dans Firefox.

La propriété CSS -webkit-text-fill-color spécifie la couleur de remplissage des caractères du texte . Si cette propriété n'est pas définie, la valeur de la propriété color est utilisée. MDN

Cela signifie donc que nous définissons la couleur du texte avec text-fill-color et caret color avec la propriété de couleur standard. Dans un navigateur non pris en charge, le curseur et le texte auront la même couleur - couleur du curseur.