web-dev-qa-db-fra.com

Modification de la famille de polices pour l'espace réservé

Est-il possible que le champ de saisie ait une famille de polices et son autre espace réservé?

J'ai essayé de changer la famille de polices pour l'espace réservé de l'entrée avec @ font-face déjà défini en CSS, mais cela ne fonctionne pas

CSS 

.mainLoginInput::-webkit-input-placeholder { 
  font-family: 'myFont', Arial, Helvetica, sans-serif;
}

.mainLoginInput:-moz-placeholder { 
  font-family: 'myFont', Arial, Helvetica, sans-serif;
}

HTML 

<input class="mainLoginInput" type="text" placeholder="Username"  />

Comment puis-je résoudre ce problème?

cssinputstylesheetfont-faceplaceholder
21
Goldie

Je l'ai trouvé ...

Le préfixe pour les utilisateurs de Firefox 19+ est ::-moz-placeholder

Et le code ressemble à ceci

.mainLoginInput::-moz-placeholder {
   font-family: 'myFont', Arial, Helvetica, sans-serif;  
}
4
Goldie

Dans le cas où quelqu'un souhaite les sélecteurs d'espaces réservés pour tous les navigateurs:

.mainLoginInput::-webkit-input-placeholder {
  font-family: 'myFont', Arial, Helvetica, sans-serif;
}

.mainLoginInput:-ms-input-placeholder {
  font-family: 'myFont', Arial, Helvetica, sans-serif;
}

.mainLoginInput:-moz-placeholder {
  font-family: 'myFont', Arial, Helvetica, sans-serif;
}

.mainLoginInput::-moz-placeholder {
  font-family: 'myFont', Arial, Helvetica, sans-serif;
}
43
Balthazar

Utilisez ceci pour la prise en charge principale du navigateur:

HTML: 

<input type="text" placeholder="placeholder text.." class="mainLoginInput" />

CSS: 

.mainLoginInput::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  font-family: 'myFont', Arial, Helvetica, sans-serif;
  opacity: 1; /* Firefox */
}

.mainLoginInput:-ms-input-placeholder { /* Internet Explorer 10-11 */
  font-family: 'myFont', Arial, Helvetica, sans-serif;
}

.mainLoginInput::-ms-input-placeholder { /* Microsoft Edge */
  font-family: 'myFont', Arial, Helvetica, sans-serif;
}

Détails de référence lien

2
Arif

Comme ça

.mainLoginInput::placeholder{
     font-family: -Your font here-;
}
2
FuriousTroller

Voici l'utilisation complète de ::placeholder pseudo-élément:

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: pink;
}
::-moz-placeholder { /* Firefox 19+ */
 color: pink;
}
:-ms-input-placeholder { /* IE 10+ */
 color: pink;
}
:-moz-placeholder { /* Firefox 18- */
 color: pink;
}

Tous les espaces réservés dans Firefox ont une valeur d'opacité qui leur est appliquée, afin de résoudre ce problème, nous devons réinitialiser cette valeur:

::-moz-placeholder {
  opacity: 1;
}

Source

2
Giacomo Paita