嗯......你有很多事情发生在这里，但我相信我可能已经达到了你想要的结果（我不是 100% 确定我理解你想要什么，但我的操作是假设您希望您的 textarea 包含与您的输入字段相同的边框和框阴影）。我认为这里的主要问题主要与等级基础有关。正因为如此，我觉得在我们在这里处理我们的实际代码之前应该说几件事。原则上，您应该在样式表的顶部有更通用的规则，而在您往下走时应该有更具体的规则。重置（原始元素，如 textarea、input 等）应该位于顶部 - 或至少在您希望应用于这些元素的类之上。
另外，我强烈建议您避免使用 !important。如果您发现自己需要使用 !important，这通常意味着您的真正问题出在其他地方。它表明您现在正试图反对 CSS 的自然流动，以迫使它掩盖其他东西。当您需要覆盖该规则时会发生什么？你将不得不编写一个更具体的规则，整个事情很快就会变成一团糟。
话虽如此，为了熟悉起见，我已经使用了您的代码并注释掉了有问题的行，并解释了为什么它们会阻止您实现您想要的。
.form-control
{
color: #34495e;
/*border-color: transparent; Because of this, even if you had a border, you wouldn't be able to see it (assuming you didn't override it later). */
/*border: none !important; 1. Use of !important. 2. Your border isn't showing because this is explicitly telling it not to. */
/*border-bottom-width: 0px; You're getting rid of the bottom border. */
/*border-bottom: none; You're getting rid of the bottom border. */
font-size: 16px;
line-height: 1.467;
padding: 8px 12px 8px 66px;
height: 54px;
-webkit-appearance: none;
/*-webkit-box-shadow: none; Explicitly telling it not to have a box-shadow */
/* box-shadow: none; Explicitly telling it not to have a box-shadow */
-webkit-transition: border .25s linear, color .25s linear, background-color .25s linear;
transition: border .25s linear, color .25s linear, background-color .25s linear;
background-repeat: no-repeat;
}
.uploadfieldset
{
/*border: none; Explicitly telling it not to have a border */
border-radius: 0;
padding: 0;
}
.notes-field
{
background-clip: border-box;
background-size: contain
border-radius:0;
height: 54px;
width: 680px;
font-family: 'gotham_htfbook';
font-size: 18px;
color: #000000;
text-transform: none;
text-align: left;
font-weight: normal;
}
input[type=text], textarea
{
-webkit-appearance: none;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
box-shadow: 0 0 5px rgba(89, 89, 89, 1);
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid rgba(204, 204, 204, 1);
}
input[type=text]:focus, textarea:focus
{
box-shadow: 0 0 5px rgba(89, 89, 89, 1);
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid rgba(204, 204, 204, 1);
}
但是，在这里，我重新排序了您的一些行，以实现我之前提到的一些原则。因为我不知道你打算用它做什么，所以我尽量不要在没有直接必要的情况下篡改东西。我也没有删除你的任何台词。相反，我只是将它们注释掉，这样你就可以跟着看看我实际上做了什么。如果您愿意，您可以自己删除它们。
input[type=text], textarea /* Moved to the top of your stylesheet */
{
-webkit-appearance: none;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
box-shadow: 0 0 5px rgba(89, 89, 89, 1); /* Reminder: You're defining your box-shadow here */
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid rgba(204, 204, 204, 1); /* Reminder: You're defining your border here */
}
input[type=text]:focus, textarea:focus /* Moved to the top of your stylesheet */
{
/*box-shadow: 0 0 5px rgba(89, 89, 89, 1); No need to redefine in :focus. It will be in inherited. */
padding: 3px 0px 3px 3px; /* See: padding in .uploadfieldset (below) */
/*margin: 5px 1px 3px 0px; No need to redefine in :focus. It will be in inherited. */
/*border: 1px solid rgba(204, 204, 204, 1); No need to redefine in :focus. It will be in inherited. */
}
.form-control
{
color: #34495e;
/*border-color: transparent; This will hide previously defined border. */
/*border: none !important; This will override previously defined border. Remember, don't use !important.*/
/*border-bottom-width: 0px; This will get rid of the bottom border. */
/*border-bottom: none; This will get rid of the bottom border. */
font-size: 16px;
line-height: 1.467;
padding: 8px 12px 8px 66px;
height: 54px;
-webkit-appearance: none;
/*-webkit-box-shadow: none; This will override previously defined box-shadows. */
/* box-shadow: none; This will override previously defined box-shadows. */
-webkit-transition: border .25s linear, color .25s linear, background-color .25s linear;
transition: border .25s linear, color .25s linear, background-color .25s linear;
background-repeat: no-repeat;
}
.uploadfieldset
{
/*border: none; This will override previously defined borders. */
border-radius: 0;
padding: 0; /* This tells your text field to not have any padding. However, when you click on your textarea, the padding set by textarea:focus will override THIS. */
}
.notes-field
{
background-clip: border-box;
background-size: contain
border-radius:0;
height: 54px;
width: 680px;
font-family: 'gotham_htfbook';
font-size: 18px;
color: #000000;
text-transform: none;
text-align: left;
font-weight: normal;
}
如果您尝试使用此标记中的任何一个：
<textarea class="form-control upladfieldset notes-field" rows="6"></textarea>
<input type="text">
您可以看到两个字段的样式都相同。我希望这会有所帮助。