Css 更改占位符的字体族

输入字段是否可以有一个

字体系列

和另一个占位符

我已尝试使用CSS中已定义的

@font-face

更改输入占位符的

font-family

，但它不起作用：

CSS

.mainLoginInput:：-webkit输入占位符{
字体系列：“myFont”、Arial、Helvetica、无衬线字体；
}
.mainLoginInput:-moz占位符{
字体系列：“myFont”、Arial、Helvetica、无衬线字体；
}

HTML

如何解决这个问题？

找到了

Firefox 19+用户的前缀是

：-moz占位符

代码如下所示

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

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

---

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

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

---

以下是

：：占位符

伪元素的完整用法：

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

就像这样

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

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

---

将此选项用于主要浏览器支持：

HTML:

<input type="text" placeholder="placeholder text.." class="mainLoginInput" />

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

---

详细信息参考

如果您支持IE 10，还有

：-ms输入占位符

。有没有理由添加两次

-moz占位符

？（可能我不理解这些单

：

或双

：

。带有单

：

的是firefox v18和更低版本。他们采用双版本来遵循webkit语义。）