Ändern von schriftart-Familie für den Platzhalter

Ist es posible für das input-Feld auf eine schriftart-Familie, und es ist Platzhalter andere?

Habe ich versucht zu ändern, font-family für die Eingabe der Platzhalter mit bereits definierten @font-face in CSS, aber es funktioniert nicht

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"  />

Wie kann ich slove dieses problem?

InformationsquelleAutor der Frage Goldie | 2013-01-25

  1. 37

    Den Fall, dass jemand will die Platzhalter-Selektoren für alle Browser :

    .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;
}

    InformationsquelleAutor der Antwort Aperçu

  2. 2

    Gefunden...

    Präfix für Firefox 19+ Nutzer ist ::-moz-placeholder

    Und der code sieht so aus

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

    InformationsquelleAutor der Antwort Goldie

  3. 1

    Hier ist die vollständige Nutzung der ::placeholder pseudo-element:

    ::-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;
}

    Alle Platzhalter in Firefox haben einen Wert für die Deckkraft angewendet, um dieses Problem zu beheben, müssen wir zurücksetzen, Wert:

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

    Quelle

    InformationsquelleAutor der Antwort Giacomo Paita

  4. 1

    Einfach so

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

    InformationsquelleAutor der Antwort FuriousTroller

Schreibe einen Kommentar