Is the any way to set different fonts for an input placeholder and value? I need to set diffrent fonts for my input placeholder and value because they use diffrent languages. The placeholder uses an right tonleft language but the vakue uses english. Is it possible in CSS3?
In most browsers, the placeholder text is grey. To change this, style the placeholder with the non-standard ::placeholder selector.
The ::placeholder selector selects form elements with placeholder text, and let you style the placeholder text. The placeholder text is set with the placeholder attribute, which specifies a hint that describes the expected value of an input field.
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.
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.
You can do this by targeting the placeholder text in css. Then setting color
on the input to be something else
::-webkit-input-placeholder {
color: red;
}
:-moz-placeholder {
color: red;
}
::-moz-placeholder {
color: red;
}
:-ms-input-placeholder {
color: red;
}
JSFIDDLE
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