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>

Answer 1

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

Answer 2

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>

Answer 3

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>

Answer 4

将字体系列添加到 textarea font-family:'Tahoma';

Answer 5

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

Answer 6

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>