试图改变占位符的字体粗细答案

【问题标题】：Trying to change the placeholder's font-weight试图改变占位符的字体粗细
【发布时间】：2015-09-21 03:51:13
【问题描述】：

我有一个带占位符的输入框，占位符文本非常粗体，我想让它更薄。我查看了这个资源http://coolestguidesontheplanet.com/styling-placeholder-text-input-fields-forms-css/，它提供了更改字体粗细的代码，但它不起作用。到目前为止，这是我的代码：

.infoPlaceholder::-ms-input-placeholder {
    font-weight: lighter;
}

<input class="infoPlaceholder" name="firstName" placeholder="First Name"/>

但是，这并没有改变占位符的权重。对我来说，这似乎仍然很大胆。我的代码有问题吗？或者有没有其他方法可以产生这种效果？

【问题讨论】：

"有一个输入框有占位符，占位符文字很粗体" 可以创建stacksn-ps,jsfiddlejsfiddle.net来演示吗？
输入字体占位符由输入字体控制，不能单独设置样式。此外，您可能需要不同的字体来输入更轻的字体。我在我的项目中使用“proxima-nova”字体并在使用该字体时设置font-weight: 100，并且重量更轻。

标签： javascript jquery html web

【解决方案1】：

试试这个：- http://jsfiddle.net/w4dazfdj/1/

CSS：-

.infoPlaceholder::-webkit-input-placeholder {
    font-weight: lighter;
    color:#AFB2B3;
}
.infoPlaceholder::-moz-placeholder {
    font-weight: lighter;
    color:#AFB2B3;
}
.infoPlaceholder::-ms-input-placeholder {
    font-weight: lighter;
    color:#AFB2B3;
}

【讨论】：

@Tushar 只是为了让他更容易理解，我是这样写的。
@JaeKim 您还可以使用 Photoshop 使用带有占位符文本的背景图像。
@Tushar 您不应该组合特定于供应商的 CSS 伪元素。根据 CSS 文档，When a user agent cannot parse the selector, it must ignore the selector and the following declaration block (if any) as well。请阅读这篇 SO 文章：stackoverflow.com/questions/16982449/…

【解决方案2】：

font-weight 属性还接受一个从 100 到 900 的数值来指定文本应该多亮或多粗，其中 100 最亮，900 最粗。如果使用“font-weight:lighter;”没用，我建议用数值来试验。类似这样的事情：

.infoPlaceholder::-ms-input-placeholder {
    font-weight: 100;
}

【讨论】：

这也不起作用...嗯...也许，您还有其他解决方案吗？
如果“font-weight:lighter”不起作用，这将不起作用