Menu
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?
982
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.
In most browsers, the placeholder text is grey. To change this, style the placeholder with the non-standard ::placeholder selector.
Change Input Placeholder Text with CSS You can use the ::placeholder pseudo-element to change the styles of the placeholder text, which includes the ability to change the background. The code in this example uses a Sass function to generate code for support in older browsers as well.
To change font family for TextInput placeholder in React Native, we can set the fontFamily style of the TextInput . to set the fontFamily property to 'courier' to render the text inputted in the TextInput with Courier.
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; } 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
