web-dev-qa-db-ja.com

プレースホルダーのフォントファミリを変更する

入力フィールドに1つのフォントファミリと他のプレースホルダを含めることは可能ですか？

CSSで@ font-faceが既に定義されている入力のプレースホルダーのfont-familyを変更しようとしましたが、機能していません

[〜＃〜] 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"  />

どうすればこの問題を解決できますか？

cssinputstylesheetfont-faceplaceholder
21
Goldie

それを見つけた...

Firefox 19+ユーザーのプレフィックスは::-moz-placeholder

そして、コードは次のようになります

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

誰かがすべてのブラウザーのプレースホルダーセレクターを必要とする場合：

.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

これを主要なブラウザサポートに使用します。

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

詳細リファレンス link

2
Arif

こんな感じ

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

::placeholder疑似要素の完全な使用法は次のとおりです。

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

Firefoxのすべてのプレースホルダーには不透明度の値が適用されているため、これを修正するには、その値をリセットする必要があります。

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

ソース

2
Giacomo Paita