3

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.com/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?

Jae Kim
  • 625
  • 3
  • 12
  • 23
  • _"have an input box with a place holder and the placeholder text is very bold"_ Can create stacksnippets , jsfiddle http://jsfiddle.net to demonstrate ? – guest271314 Sep 21 '15 at 05: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 Mar 01 '19 at 12:10

2 Answers2

3

Try this out:- 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
  • 9,512
  • 5
  • 32
  • 55
  • @Tushar Just to make him easier to understand I wrote it in that way. – Aditya Singh Sep 21 '15 at 04:37
  • @JaeKim You can also use a background image with Placeholder text using Photoshop. – Aditya Singh Sep 21 '15 at 05:09
  • 3
    @Tushar You should not combine vendor-specific CSS pseudo-elements. According to CSS documentation, `When a user agent cannot parse the selector, it must ignore the selector and the following declaration block (if any) as well`. Please, read this SO article: http://stackoverflow.com/questions/16982449/why-isnt-it-possible-to-combine-vendor-specific-pseudo-elements-classes-into-on – Yeldar Kurmangaliyev Sep 21 '15 at 05:12
0

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;
}
user2278489
  • 51
  • 1
  • 1
  • 5