Modification de la police-famille pour l'espace réservé

Est-il possible pour le champ de saisie pour avoir une police de la famille et c'est réservé aux autres?

J'ai essayé de changer les polices de la famille pour l'entrée de l'espace réservé avec déjà défini @font-face dans le CSS mais ça 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 slove ce problème?

OriginalL'auteur Goldie | 2013-01-25

  1. 38

    Dans le cas où quelqu'un veut les espaces réservés sélecteurs 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;
}
    Aucune raison de s'en -moz-placeholder est ajouté deux fois? (Peut-être que je ne comprends pas ces : ou double ::.
    L'un avec le seul : est pour firefox v18 et inférieur. Ils ont adopté la double version de suivre le webkit sémantique

    OriginalL'auteur Aperçu

  2. 2

    Trouvé...

    Préfixe pour Firefox 19+ utilisateurs est ::-moz-placeholder

    Et le code ressemble à ceci

    .mainLoginInput::-moz-placeholder {
   font-family: 'myFont', Arial, Helvetica, sans-serif;  
}
    Il est également ::-ms-input-placeholder si vous soutien à IE 10.

    OriginalL'auteur Goldie

  3. 1

    Ici est 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 sont appliquées, afin de corriger cela, nous avons besoin de réinitialiser cette valeur:

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

    Source

    OriginalL'auteur Giacomo Paita

  4. 1

    Simplement comme ceci

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

    OriginalL'auteur FuriousTroller