更改占位符的字体系列

Question

输入字段是否有可能有一个font-family，而占位符是另一个？

我试图在 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"  />

如何解决这个问题？

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

将其用于主要浏览器支持：

.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 3

找到了...

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

代码看起来像这样

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

Answer 4

就像这样

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

Answer 5

以下是伪元素::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;
}

源