Menu
I have read a couple of articles about styling the placeholder of an input field using ::-webkit-input-placeholder in HTML5. It works perfectly, except for one thing.
If I try to increase the font-size to a value higher than 16px, the text gets "cut" at the bottom. This happens regardless of height and padding of the input itself. Does anyone know a way of avoiding this problem, either using pure CSS or javascript?
I have added a screenshot of two inputfields where the placeholders have an font-size of 20px
Jsfiddle: https://jsfiddle.net/bvwdg86x/
475
Placeholder text will automatically inherit the font family and font size of the regular input text, but you may be in a situation where you want to change the placeholder text color. You can accomplish that with the ::placeholder pseudo-element.
To resize a placeholder:Click inside the placeholder. The border changes to sizing handles. Move the pointer over the sizing handles and a + appears. Click and drag the placeholder to the size you want.
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.
input { width: 400px; padding: 0 20px; } input, input::-webkit-input-placeholder { font-size: 20px; line-height: 3; }<input type="text" placeholder="My Cool Placeholder Text">If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
