Couleur d'Espace Réservé CSS

Les espaces réservés, les éléments de texte fréquemment grisés l'intérieur d'une entrée, peut être une douleur au style. Heureusement, nous avons adjugé une solution à court mais efficace style CSS pour le texte de l'espace réservé de votre entrée toute couleur et l'opacité vous le souhaitez. Lisez la suite pour le code.

Changer la couleur du texte espace réservé

Commençons par une entrée simple et un texte d'espace réservé, pour cet exemple, nous utilisons le mot «search», mais vous pouvez utiliser tout ce que vous voulez. Le code HTML de base est ci-dessous: 

HTML

<body>
  <input placeholder="Search">
</body>

Entrée (et textarea) Texte d'espace réservé par défaut à une couleur gris clair, cependant, nous pouvons changer cela avec quelques lignes de CSS. Ici, nous allons colorer le rouge de saisie de texte en utilisant un nom de couleur HTML, mais toute méthode de couleur suffira (Hex, RGB, HSL). 

CSS

::-webkit-input-placeholder { /* Chrome */
  color: red;
}
:-ms-input-placeholder { /* IE 10+ */
  color: red;
}
::-moz-placeholder { /* Firefox 19+ */
  color: red;
  opacity: 1;
}
:-moz-placeholder { /* Firefox 4 - 18 */
  color: red;
  opacity: 1;
}
Démo sur Codepen

Notez qu'il est important d'inclure les préfixes différents fournisseurs afin de soutenir autant de navigateurs que possible. Seuls les textes entrée de l'espace réservé par défaut de Firefox pour une légère transparence de sorte que son inutile de définir la propriété d'opacité sur IE ou Chrome.

Changement espace réservé couleur du texte de mise au point

Très bien, nous avons réussi à changer la couleur de la texte pour le rouge, mais ce serait bien si quelque chose arrivait quand un utilisateur clique sur l'intérieur de notre entrée. En utilisant les mêmes fournisseurs préfixé propriétés CSS, nous pouvons modifier l'opacité de la saisie de texte d'espace réservé sur le focus. 

CSS

input {
  outline: none;
  padding: 12px;
  border-radius: 3px;
  border: 1px solid black;
}
::-webkit-input-placeholder { /* Chrome */
  color: red;
  transition: opacity 250ms ease-in-out;
}
:focus::-webkit-input-placeholder {
  opacity: 0.5;
}
:-ms-input-placeholder { /* IE 10+ */
  color: red;
  transition: opacity 250ms ease-in-out;
}
:focus:-ms-input-placeholder {
  opacity: 0.5;
}
::-moz-placeholder { /* Firefox 19+ */
  color: red;
  opacity: 1;
  transition: opacity 250ms ease-in-out;
}
:focus::-moz-placeholder {
  opacity: 0.5;
}
:-moz-placeholder { /* Firefox 4 - 18 */
  color: red;
  opacity: 1;
  transition: opacity 250ms ease-in-out;
}
:focus:-moz-placeholder {
  opacity: 0.5;
}
Démo sur Codepen

Dans l'exemple ci-dessus, nous avons jeté dans quelques styles de base sur l'entrée elle-même, et a ajouté une transition de l'opacité pour rendre l'expérience un peu plus agréable. Découvrez la démo et de l'expérience avec d'autres propriétés CSS et les transitions.