31

输入字段是否可以有一个font-family而占位符是另一个?

我尝试使用 CSS 中font-family已经定义的输入占位符进行更改,@font-face但它不起作用:

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

我怎么解决这个问题?

4

5 回答 5

62

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

.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;
}
于 2014-05-06T10:12:17.467 回答
7

将此用于主要浏览器支持:

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

详细参考链接

于 2018-12-14T09:01:56.787 回答
5

找到了...

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

代码看起来像这样

.mainLoginInput::-moz-placeholder {
   font-family: 'myFont', Arial, Helvetica, sans-serif;  
}
于 2013-01-25T15:13:39.873 回答
5

简直就是这样

.mainLoginInput::placeholder{
     font-family: -Your font here-;
}
于 2018-06-13T06:50:34.207 回答
2

下面是::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;
}

资源

于 2017-01-02T15:30:22.503 回答