Is it posible for input field to have one font-family and it's placeholder other?
I have tried to change font-family for input's placeholder with already defined @font-face in CSS but it's not working
CSS
.mainLoginInput::-webkit-input-placeholder {
font-family: 'myFont', Arial, Helvetica, sans-serif;
}
.mainLoginInput:-moz-placeholder {
font-family: 'myFont', Arial, Helvetica, sans-serif;
}
HTML
<input class="mainLoginInput" type="text" placeholder="Username" />
How can I slove this problem?
Use this for major browser support :
HTML:
CSS:
Details reference link
Simply like this
Found it...
Prefix for Firefox 19+ users is
::-moz-placeholder
And the code looks like this
In case someone want the placeholders selectors for all browsers :
Here is the complete use of
::placeholder
pseudo-element:All placeholders in Firefox have an opacity value applied to them, so in order to fix this we need to reset that value:
Source