Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to set different fonts for input placeholder and value? [duplicate]

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?

like image 277
hamidfzm Avatar asked Feb 01 '14 22:02

hamidfzm


People also ask

How do I change the text style of a placeholder?

In most browsers, the placeholder text is grey. To change this, style the placeholder with the non-standard ::placeholder selector.

Can I style the placeholder text?

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.

Can we change placeholder font size?

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.

How do you change placeholder font weight?

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.


1 Answers

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

like image 164
jmore009 Avatar answered Oct 11 '22 05:10

jmore009