I have an input box with a place holder and the placeholder text is very bold and I would like to make it thinner. I looked at this resource /, which gave the code to change the font-weight but it didn't work. This is my code so far:

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

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

However, this did not change my placeholder's weight. It seems still pretty bold to me. Is there something wrong with my code? Or is there another way to produce this effect?

I have an input box with a place holder and the placeholder text is very bold and I would like to make it thinner. I looked at this resource http://coolestguidesontheplanet./styling-placeholder-text-input-fields-forms-css/, which gave the code to change the font-weight but it didn't work. This is my code so far:

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

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

However, this did not change my placeholder's weight. It seems still pretty bold to me. Is there something wrong with my code? Or is there another way to produce this effect?

• javascript
• jquery
• html
• web

• "have an input box with a place holder and the placeholder text is very bold" Can create stacksnippets , jsfiddle jsfiddle to demonstrate ? – guest271314 Commented Sep 21, 2015 at 5:17
• Font placeholder on input is controlled by input font, you can't style it separately. Also you will probably need different font for input that is lighter. I was using "proxima-nova" font in my project and setting font-weight: 100 when using that font and weight is lighter. – jcubic Commented Mar 1, 2019 at 12:10

2 Answers 2

Try this out:- http://jsfiddle/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;
}

The font-weight property also accepts a numerical value from 100 to 900 to specify how light or how bold text should be, with 100 as the lightest and 900 as the boldest. If using "font-weight: lighter;" did not work, I would suggest experimenting with the numerical values instead. Something along these lines:

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