Changing Font-Family for Placeholder

Changing font-family for placeholder

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;  
}

How to Change Font Family for textInput Placeholder in React Native

Try this :

<TextInput
    secureTextEntry={(this.state.email.length <= 0 && this.state.emailStatus != 'onFocus') ? true : false}
    style={styles.textboxfieldd}
    placeholderStyle={styles.textboxfieldd}
    onFocus={this.changeStatus.bind(this, 'emailStatus', 'onFocus', '')}
    onChangeText={(email) => this.setState({ email })}
    value={this.state.email}
    placeholder={this.state.emailStatusPH}
    placeholderTextColor="#D8D8D8" />

Exactly this line => secureTextEntry={(this.state.email.length<=0 && this.state.emailStatus!='onFocus') ?true:false} solves the problem .

Because if we give secureTextEntry={true} means fontfamily is set to placeholder text but field changed as password , so for that only we wrote like this . secureTextEntry={(this.state.email.length<=0 && this.state.emailStatus!='onFocus') ?true:false}

If that field length is 0 and not focused means it will set true secureTextEntry={true} so the placeholder text is set to mentioned fontfamily

Font-family placeholder ion-input Ionic5

Placeholder font just inherits from the input font. If your input font and placeholder font can be the same, then just apply the css style to your input element.

ion-input {
  --ion-font-family: 'My-font', sans-serif;
}

How to set the color and font style of placeholder text

You can use the following code for cross-browser support:

For Google Chrome:

.element::-webkit-input-placeholder {
    color: blue;
    font-weight: bold;
}

For Mozilla Firefox:

.element::-moz-placeholder {
    color: blue;
    font-weight: bold;
}

For Internet Explorer:

.element:-ms-input-placeholder {
    color: blue;
    font-weight: bold;
} 

For Opera:

.element:-o-input-placeholder {
    color: blue;
    font-weight: bold;
} 

Placeholder font not changing

You want to use font-family, not font-style property, like so:

::-webkit-input-placeholder {
    font-family: Helvetica;
}
:-moz-placeholder {
    font-family: Helvetica;
}
::-moz-placeholder {
    font-family: Helvetica;
}
:-ms-input-placeholder {
    font-family: Helvetica;
}

Change the font size of the placeholder

In order to achieve your target, you must change the input styles properties in InputProps, as an example:

note: this will show ... if the placeholder overflow.

const styles = theme => ({
  input: {
    "&::placeholder": {
      textOverflow: "ellipsis !important",
      color: "blue",
      fontSize: 14
    }
  }
});

and

the component should be:

<TextField
  InputProps={{
   classes: {
     input: classes.input
   }
  }}
  variant="outlined"
  placeholder="Exp. XXXXXXXXXXXX"
/>

please find the code sandbox here: https://codesandbox.io/s/9j479w189y

Placeholder font style is coming as different for textfield and textarea

You need to set them to the same font family in the CSS:

textarea,
input[type=text] {
    font-family:Arial;
}

---

Related Topics