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
Changing font-family for placeholder
提问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;
}
回答by FuriousTroller
Simply like this
就这样
.mainLoginInput::placeholder{
font-family: -Your font here-;
}
