更改字体家族的占位符(Changing font-family for placeholder)

它是更多钞票的输入字段有一个FONT-FAMILY和它的占位符其他？

我曾试图改变FONT-FAMILY输入的占位符与CSS已经定义@字体面，但它不工作

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

我怎样才能解决售后服务这个问题？

Answer 1:

如果有人想为所有的浏览器的占位符选择：

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

Answer 2:

找到了...

前缀为Firefox 19+用户是::-moz-placeholder

并且代码看起来像这样

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

Answer 3:

用这个主要的浏览器支持：

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

详情参考链接

Answer 4:

下面是完整的使用::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;
}

资源

Answer 5:

只要这样的

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

文章来源: Changing font-family for placeholder