web-dev-qa-db-fra.com

Stylet de saisie de texte

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

htmlcssinputcaret
111
Randomblue

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

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

73
Nestor Britez

Caret est le mot que vous recherchez. Je crois cependant que cela fait partie de la conception des navigateurs, et non à la portée de CSS.

Cependant, voici un article intéressant sur simulant un changement de curseur à l'aide de JavaScript et CSShttp://www.dynamicdrive.com/forums/showthread.php?t=1745 Cela me semble un peu difficile, mais c'est probablement le seul moyen d'accomplir cette tâche. Le point principal de l'article est:

Nous aurons un texte clair quelque part sur l’écran, hors de la vue du spectateur. Lorsque l’utilisateur cliquera sur notre "faux terminal", nous nous concentrerons sur le texte et lorsque celui-ci commencera à taper nous ajouterons simplement les données saisies dans le texte. à notre "terminal" et c'est tout.

ICI est une démo en action

Mise à jour 2018

Il y a un nouvelle propriété css caret-color qui s’applique au caret d’une région input ou contenteditable. Le support est en croissance, mais pas à 100%, et cela n'affecte que la couleur, pas la largeur ou d'autres types d'aspect.

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

En CSS3, il existe maintenant une méthode native pour le faire, sans aucun des hacks suggérés dans les réponses existantes: la propriété caret-color .

Comme vous pouvez le voir ci-dessous, vous pouvez faire beaucoup de choses avec le curseur. 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 propriété caret-color Est prise en charge par Firefox 55 et Chrome 60. La prise en charge est également disponible dans Safari Technical Preview et dans Opera (mais pas encore dans Edge) .Vous pouvez voir les tables de support actuelles ici .

36
Sacha Nacar

Voici quelques vendeurs 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 styler différents états, tels que focus

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

Vous pouvez aussi faire certaines transitions dessus, 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;}
7
Sergey Khmelevskoy

Il suffit d'utiliser la propriété color aux côtés de 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 curseur) et également 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é standard color. Dans un navigateur non pris en charge, le curseur et le texte auront la même couleur, la couleur du curseur.

3
Velda