更改占位符的字体系列

Posted 2023-03-05

【中文标题】更改占位符的字体系列

【英文标题】：Changing font-family for placeholder

【发布时间】：2013-01-09 13:34:41

【问题描述】：

输入字段是否可以有一个 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"  />

我该如何解决这个问题？

【参考方案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;

【讨论】：

-moz-placeholder 被添加两次的任何原因？ （也许我不明白这些单:或双::。

带有: 的那个是firefox v18 及更低版本。他们采用了双重版本来遵循 webkit 语义

【参考方案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;

详情参考link

【参考方案3】：

找到了……

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

代码看起来像这样

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

【讨论】：

如果你支持 IE 10 还有::-ms-input-placeholder。

【参考方案4】：

就这样

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

【参考方案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;

Source