Why the textarea doesn't have the same font size with input text?

Question

Can someone tell me why "message" which is a textarea has different font size than "full name" and "email" which are input, however they have the same class name? how can i make it have the same font size? thank you in advance!

body {
  background: grey;
}

.form-control {
      width: 40%;
      padding: 10px;
      margin: 10px;
      border-radius: 1.5em;
      font-size: 1.1em;
      background-color: $white;
      border: none;
      color: black;
      resize: none;
      &:focus {
        outline: 0;
      }
    }
    button {
      padding: .5em .75em;
      margin: 10px;
      font-size: 1.1em;
      border-radius: 1.5em;
      background-color: $white;
      border: none;
      outline: 0;
      color: black;
      &:hover {
        color: $purple;
      }
    }

        <form action="https://formspree.io/f/" method="POST">
          <input
            name="name"
            type="text"
            class="form-control"
            placeholder="Full name"
            required
          />
          <br />
          <input
            name="_replyto"
            type="email"
            class="form-control"
            placeholder="Email"
            required
          />
          <br />
          <textarea name="message" class="form-control" placeholder="Message" rows="5" required></textarea>
          <br />
          <button type="submit">Send</button>
        </form>

score 1 · Accepted Answer · answered Jul 20 '21 at 15:44

The font family is differnt make it same add this

textarea{
   font-family:'Tahoma';
}

body {
  background: grey;
}

.form-control {
      width: 40%;
      padding: 10px;
      margin: 10px;
      border-radius: 1.5em;
      font-size: 1.1em;
      background-color: $white;
      border: none;
      color: black;
      resize: none;
      &:focus {
        outline: 0;
      }
    }
    button {
      padding: .5em .75em;
      margin: 10px;
      font-size: 1.1em;
      border-radius: 1.5em;
      background-color: $white;
      border: none;
      outline: 0;
      color: black;
      &:hover {
        color: $purple;
      }
    }
    textarea{
    font-family:'Tahoma';
    }

  <form action="https://formspree.io/f/" method="POST">
          <input
            name="name"
            type="text"
            class="form-control"
            placeholder="Full name"
            required
          />
          <br />
          <input
            name="_replyto"
            type="email"
            class="form-control"
            placeholder="Email"
            required
          />
          <br />
          <textarea name="message" class="form-control" placeholder="Message" rows="5" required></textarea>
          <br />
          <button type="submit">Send</button>
        </form>

hmmm interesting! i have set in my code the font family in body, i didn't know that i have to set it especially in textarea again. however u are right, it works! — user3378613, Jul 20 '21 at 15:51
By default, browsers render most form elements (textareas, text boxes, buttons, etc) using OS controls or browser controls. So most of the font properties are taken from the theme the OS is currently using. You'll have to target the form elements themselves if you want to change their font/text styles - should be easy enough by selecting them though, as you've just done. u can also set `textarea { font-family: inherit; font-size: inherit;}` — Amal nandan, Jul 20 '21 at 15:58
@user3378613 is it working now? then can u plz vote the answer or mark correct? — Amal nandan, Jul 20 '21 at 18:04

Ramzi Osta · Answer 2 · 2021-07-20T15:48:23.827

0

the setting is for the whole form when you do .form-control{} try setting the width of the text area separetly. Give it an id and a separate property/value from the form

edited Jul 20 '21 at 15:48

answered Jul 20 '21 at 15:43

Ramzi Osta

63
6

score 0 · Answer 3 · answered Jul 20 '21 at 15:47

You need to style the placeholder

body {
  background: grey;
}

textarea::placeholder {
      font-size: 1.1em;
}

.form-control {
      width: 40%;
      padding: 10px;
      margin: 10px;
      border-radius: 1.5em;
      font-size: 1.1em;
      background-color: $white;
      border: none;
      color: black;
      resize: none;
      &:focus {
        outline: 0;
      }
    }
    button {
      padding: .5em .75em;
      margin: 10px;
      font-size: 1.1em;
      border-radius: 1.5em;
      background-color: $white;
      border: none;
      outline: 0;
      color: black;
      &:hover {
        color: $purple;
      }
    }

<form action="https://formspree.io/f/" method="POST">
          <input
            name="name"
            type="text"
            class="form-control"
            placeholder="Full name"
            required
          />
          <br />
          <input
            name="_replyto"
            type="email"
            class="form-control"
            placeholder="Email"
            required
          />
          <br />
          <textarea name="message" class="form-control" placeholder="Message" rows="5" required></textarea>
          <br />
          <button type="submit">Send</button>
        </form>

score 0 · Answer 4 · answered Jul 20 '21 at 15:57

0

Add the font family to the textarea font-family:'Tahoma';

answered Jul 20 '21 at 15:57

Swayam Swain

1

score 0 · Answer 5 · answered Jul 20 '21 at 15:59

As explained by this answer, the default font-family for inputs and textareas are different in some browsers. The trick is to define a font-family in .form-control.

.form-control {
  font-family: Arial;
  // Other styles
}

Or if you want to use the same font for body text and form controls.

body {
  font-family: Arial;
}

.form-control {
  font-family: inherit;
}

Note: inherit might give unexpected results if you defined another font-family in one of the parent elements. To be absolutely sure, define the font-family in a (s)css variable and set it specifically.

$font-family-base: Arial;
body {
  font-family: $font-family-base;
}

.form-control {
  font-family: $font-family-base;
}

score 0 · Answer 6 · answered Jul 20 '21 at 17:02

You need to set font-family or inherit it. Input and textarea have different font families in different browsers.

Set the font-family in the body and then inherit it in the class

body {
  background: grey;
  font-family:"Tahoma";
}

.form-control {
  width: 40%;
  padding: 10px;
  margin: 10px;
  border-radius: 1.5em;
  font-size: 1.1em;
  background-color: $white;
  border: none;
  color: black;
  resize: none;
  font-family: inherit;
  &:focus {
    outline: 0;
  }
}
button {
  padding: .5em .75em;
  margin: 10px;
  font-size: 1.1em;
  border-radius: 1.5em;
  background-color: $white;
  border: none;
  outline: 0;
  color: black;
  &:hover {
    color: $purple;
  }
}

<form action="https://formspree.io/f/" method="POST">
  <input
    name="name"
    type="text"
    class="form-control"
    placeholder="Full name"
    required
  />
  <br />
  <input
    name="_replyto"
    type="email"
    class="form-control"
    placeholder="Email"
    required
  />
  <br />
  <textarea name="message" class="form-control" placeholder="Message" rows="5" required></textarea>
  <br />
  <button type="submit">Send</button>
</form>

Why the textarea doesn't have the same font size with input text?

6 Answers6