在 REACT 中更改占位符的字体大小

Question

I am using reacts form.control, I want to reduce the size of the placeholder content:

<Form>
  <Form.Group controlId="formBasicEmail">
    <Form.Label>Email address</Form.Label>
    <Form.Control type="email" placeholder="Enter email" />
    <Form.Text className="text-muted">
      We'll never share your email with anyone else.
    </Form.Text>
  </Form.Group>

  <Form.Group controlId="formBasicPassword">
    <Form.Label>Password</Form.Label>
    <Form.Control type="password" placeholder="Password" />
  </Form.Group>
  <Form.Group controlId="formBasicCheckbox">
    <Form.Check type="checkbox" label="Check me out" />
  </Form.Group>
  <Button variant="primary" type="submit">
    Submit
  </Button>
</Form>

I tried few approaches by placing fontsize attribute in style, yet its not workin.

Can anyone suggest me any solution/link for further analysis

Answer 1

You should use the ::placeholder CSS pseudo-element like the following:

.input::placeholder {
  font-size: 13px;
}