为什么文本区域与输入文本的字体大小不同？

Question

谁能告诉我为什么文本区域“消息”的字体大小与输入的“全名”和“电子邮件”的字体大小不同，但它们具有相同的 class 名称？我怎样才能使它具有相同的字体大小？提前谢谢你！

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

当您执行 .form-control{} 时，该设置适用于整个表单尝试单独设置文本区域的宽度。给它一个 id 和一个单独的 property/value 从形式

Answer 2

字体系列不同，请保持一致添加这个

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

您需要设置占位符的样式

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

将字体系列添加到文本区域字体系列：'Tahoma'；

Answer 5

正如 this answer 所解释的，输入和文本区域的默认字体系列在某些浏览器中是不同的。诀窍是在 .form-control.

中定义字体系列

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

或者如果您想对正文和表单控件使用相同的字体。

body {
  font-family: Arial;
}

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

注意：如果您在其中一个父元素中定义了另一个字体系列，inherit 可能会产生意想不到的结果。为了绝对确定，在 (s)css 变量中定义字体系列并专门设置它。

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

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

Answer 6

您需要设置font-family或继承它。 Input 和 textarea 在不同的浏览器中有不同的字体系列。

在body中设置font-family然后在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?

html

css

email

textarea

input