Changing font-family for placeholder
63,798
Solution 1
Found it...
Prefix for Firefox 19+ users is ::-moz-placeholder
And the code looks like this
.mainLoginInput::-moz-placeholder {
font-family: 'myFont', Arial, Helvetica, sans-serif;
}
Solution 2
In case someone want the placeholders selectors for all browsers :
.mainLoginInput::-webkit-input-placeholder {
font-family: 'myFont', Arial, Helvetica, sans-serif;
}
.mainLoginInput:-ms-input-placeholder {
font-family: 'myFont', Arial, Helvetica, sans-serif;
}
.mainLoginInput:-moz-placeholder {
font-family: 'myFont', Arial, Helvetica, sans-serif;
}
.mainLoginInput::-moz-placeholder {
font-family: 'myFont', Arial, Helvetica, sans-serif;
}
Solution 3
Use this for major browser support :
HTML:
<input type="text" placeholder="placeholder text.." class="mainLoginInput" />
CSS:
.mainLoginInput::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
font-family: 'myFont', Arial, Helvetica, sans-serif;
opacity: 1; /* Firefox */
}
.mainLoginInput:-ms-input-placeholder { /* Internet Explorer 10-11 */
font-family: 'myFont', Arial, Helvetica, sans-serif;
}
.mainLoginInput::-ms-input-placeholder { /* Microsoft Edge */
font-family: 'myFont', Arial, Helvetica, sans-serif;
}
Details reference link
Solution 4
Simply like this
.mainLoginInput::placeholder{
font-family: -Your font here-;
}
Solution 5
Here is the complete use of ::placeholder
pseudo-element:
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: pink;
}
::-moz-placeholder { /* Firefox 19+ */
color: pink;
}
:-ms-input-placeholder { /* IE 10+ */
color: pink;
}
:-moz-placeholder { /* Firefox 18- */
color: pink;
}
All placeholders in Firefox have an opacity value applied to them, so in order to fix this we need to reset that value:
::-moz-placeholder {
opacity: 1;
}
Author by
Goldie
Updated on March 21, 2021Comments
-
Goldie about 3 years
Is it posible for an input field to have one
font-family
and it's placeholder another?I have tried to change
font-family
for the input's placeholder with an 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 solve this problem?
-
Pavlo over 11 yearsThere is also
::-ms-input-placeholder
if you support IE 10. -
peralmq almost 7 yearsAny reason why
-moz-placeholder
is added twice? (Maybe I don't understand these single:
or double::
. -
Preview almost 7 yearsThe one with the single
:
is for firefox v18 and lower. They adopted the double version to follow the webkit semantic