尝试更改占位符的字体粗细

Question

我有一个带有占位符的输入框，占位符文本非常粗体，我想使其更薄。 我查看了该资源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"/>

但是，这并没有改变我的占位符的重量。 对我来说似乎还是很大胆的。 我的代码有问题吗？ 还是有另一种方式产生这种效果？

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

Answer 2

font-weight属性还接受一个介于100到900之间的数值，以指定文本的亮度或粗体，其中100为最浅，900为最粗。 如果使用“ font-weight：lighter;” 没有用，我建议尝试使用数值。 遵循以下原则：

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