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

Question

有人能告诉我为什么"消息"；它是一个文本区域，其字体大小与"不同；全名"；以及"；电子邮件"；哪些是输入，但是它们具有相同的类名？如何使它具有相同的字体大小？提前感谢！

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

字体家族不同而不相同添加这个

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 2

您需要设置占位符的样式

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 3

当您执行.form-control｛｝时，该设置适用于整个表单尝试单独设置文本区域的宽度。从表单中为其提供一个id和一个单独的属性/值

Answer 4

将字体家族添加到文本区域font-family:'宋体'；

Answer 5

正如这个答案所解释的，在一些浏览器中，输入和文本区域的默认字体家族是不同的。诀窍是在.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

您需要设置或继承字体家族。Input和textarea在不同的浏览器中有不同的字体家族。

在正文中设置字体家族，然后在类中继承它

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>