嘗試更改占位符的字體粗細

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