CSS 更改占位符的字体系列

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/14524328/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 21:26:17  来源:igfitidea点击:

Changing font-family for placeholder

cssinputstylesheetfont-faceplaceholder

提问by Goldie

Is it posible for input field to have one font-family and it's placeholder other?

输入字段是否有可能有一个字体系列而它是另一个占位符?

I have tried to change font-family for input's placeholder with already defined @font-face in CSS but it's not working

我尝试使用已在 CSS 中定义的 @font-face 更改输入占位符的字体系列,但它不起作用

CSS

CSS

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

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

HTML

HTML

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

How can I slove this problem?

我怎样才能解决这个问题?

采纳答案by Goldie

Found it...

找到了...

Prefix for Firefox 19+ users is ::-moz-placeholder

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

And the code looks like this

代码看起来像这样

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

回答by Balthazar

In case someone want the placeholders selectors for all browsers :

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

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

回答by Arif

Use this for major browser support :

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

HTML:

HTML:

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

CSS:

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

Details reference link

详情参考链接

回答by Giacomo Paita

Here is the complete use of ::placeholderpseudo-element:

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

All placeholders in Firefox have an opacity value applied to them, so in order to fix this we need to reset that value:

Firefox 中的所有占位符都应用了不透明度值,因此为了解决这个问题,我们需要重置该值:

::-moz-placeholder {
  opacity: 1;
}

Source

来源

回答by FuriousTroller

Simply like this

就这样

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