Changing font-family for placeholder

2019-02-06 01:23发布

Is it posible for input field to have one font-family and it's placeholder other?

I have tried to change font-family for input's placeholder with already defined @font-face in CSS but it's not working

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

How can I slove this problem?

5条回答
三岁会撩人
2楼-- · 2019-02-06 01:49

Use this for major browser support :

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

Details reference link

查看更多
Deceive 欺骗
3楼-- · 2019-02-06 01:50

Simply like this

.mainLoginInput::placeholder{
     font-family: -Your font here-;
}
查看更多
够拽才男人
4楼-- · 2019-02-06 01:53

Found it...

Prefix for Firefox 19+ users is ::-moz-placeholder

And the code looks like this

.mainLoginInput::-moz-placeholder {
   font-family: 'myFont', Arial, Helvetica, sans-serif;  
}
查看更多
再贱就再见
5楼-- · 2019-02-06 01:58

In case someone want the placeholders selectors for all browsers :

.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;
}
查看更多
Fickle 薄情
6楼-- · 2019-02-06 02:02

Here is the complete use of ::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;
}

All placeholders in Firefox have an opacity value applied to them, so in order to fix this we need to reset that value:

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

Source

查看更多
登录 后发表回答