Styliser le curseur de saisie de texte

118

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

html css input caret Randomblue
la source
1
Eh bien, c'est pour <input type="text"/>je suppose
Benjamin Crouzier
Il cherche à styliser le curseur, la question éditée et les tags
Benjamin Udink ten Cate
Veuillez envisager de modifier la réponse acceptée. Compte tenu des derniers changements CSS, la réponse mise à jour de Michael Jasper est de loin supérieure: stackoverflow.com/a/7339406/1889273
Boaz

Réponses:

74

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/

Nestor Britez
la source
3
Un hack intelligent, mais les emoji ne fonctionnent pas car ils sont juste remplis par l'ombre 😭
simbolo
Hmm, les nuances ne sont pas nécessaires pour l'effet dans mon cas (Chrome de bureau et FF) - il suffit de modifier la couleur de remplissage du texte de l'entrée.
Velda
86

«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"/>
Développer l'extrait

Michael Jasper
la source
38

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 .

Sacha Nacar
la source
1
Battez-moi au coup de poing. Bien sûr, cette propriété ne fonctionnera que dans Firefox, du moins pour le moment, et ne sortira qu'en avril 2017. Voir cette page.
SpyderScript
6

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;}
Sergey Khmelevskoy
la source
5
Ceci est utile pour styliser le texte du placholder, mais cela ne stylise pas le curseur clignotant à l'OP référencé.
craignewkirk
4

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"/>
Développer l'extrait

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.

Velda
la source