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

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

然而，这并没有改变我的占位符的字体重量。在我看来，它仍然相当粗体。我的代码有问题吗？还是有其他方法可以产生这种效果？

- Jae Kim

---

有一个带有占位符的输入框，占位符文本非常粗体。可以创建 stacksnippets、jsfiddle 等来展示吗？ - guest271314

输入框中的字体占位符由输入框字体控制，无法单独设置样式。此外，您可能需要不同的字体来使输入框更轻盈。在我的项目中，我使用了“proxima-nova”字体，并在使用该字体时设置了font-weight: 100以使其更轻盈。 - jcubic

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

- Aditya Singh

---

@Tushar 为了让他更容易理解，我用那种方式写了它。 - Aditya Singh

@JaeKim 你也可以使用Photoshop在背景图片上添加占位文本。 - Aditya Singh

根据CSS文档，你不应该合并特定供应商的CSS伪元素。如果用户代理无法解析选择器，则必须忽略选择器和其后的声明块（如果有）。请参阅此SO文章：https://dev59.com/xWQn5IYBdhLWcg3wP1JT - Yeldar Kurmangaliyev

Answer 2

font-weight属性还可以接受100到900之间的数字值，以指定文本应该有多轻或多粗，其中100最轻，900最粗。如果使用"font-weight: lighter;"没有效果，我建议尝试使用数字值进行实验。大致如下：

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

- user2278489

---

这个也不行... 嗯... 或许你有其他的解决方案吗？ - Jae Kim

如果“font-weight: lighter”无效，则此方法将无法正常工作。 - James Shiztar