无法设置 textarea 内边框阴影（仍然需要帮助）
Cannot set textarea inner border shadow (still need help)
编辑：希望有人会看到这个。自发布以来，我被卡住了并尝试了几种方法，但无济于事。
我正在尝试显示带有边框阴影的文本区域。出于某种奇怪的原因，当页面上的其他常规文本输入框正确显示其内部阴影时，textareas 根本不显示任何内部阴影。如何强制 textarea 像其他输入框一样显示阴影？
这是我正在使用的HTML。
<textarea class="form-control upladfieldset notes-field" rows="6"></textarea>
请注意，当我删除
的整个 class 属性时
class="form-control upladfieldset notes-field"
内边框阴影出现，但当然我所有其他样式都消失了，这并不理想。所以我也尝试在那些 classes 中注释掉 CSS 的个别行以查看哪一行导致了冲突，但是唯一让内部阴影出现的是如果我删除 class 属性声明一共。
这是我正在使用的 CSS。
.form-control
{
color: #34495e;
border-color: transparent;
border: none !important;
border-bottom-width: 0px;
border-bottom: none;
font-size: 16px;
line-height: 1.467;
padding: 8px 12px 8px 66px;
height: 54px;
-webkit-appearance: none;
-webkit-box-shadow: none;
box-shadow: none;
-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;
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);
}
嗯...你这里有很多事情要做，但我相信我可能已经达到了你想要的结果（我不是 100% 确定我明白你想要什么，但我在假设您希望文本区域包含与输入字段相同的边框和框阴影）。我认为这里的主要问题主要与层次结构基础有关。正因为如此，我觉得在我们在这里处理实际代码之前应该说一些事情。原则上，您应该在样式表的顶部设置更通用的规则，在向下放置时设置更具体的规则。重置（文本区域、输入等原始元素）应该在顶部——或者至少在您希望应用到这些元素的 类 之上。
此外，我强烈建议您避免使用 !important。如果您发现自己需要使用 !imporant，这通常意味着您的真正问题出在其他地方。它表明您现在正试图对抗 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">
您可以看到这两个字段的样式化方式相同。希望对您有所帮助。
编辑：希望有人会看到这个。自发布以来，我被卡住了并尝试了几种方法，但无济于事。
我正在尝试显示带有边框阴影的文本区域。出于某种奇怪的原因，当页面上的其他常规文本输入框正确显示其内部阴影时，textareas 根本不显示任何内部阴影。如何强制 textarea 像其他输入框一样显示阴影？
这是我正在使用的HTML。
<textarea class="form-control upladfieldset notes-field" rows="6"></textarea>
请注意，当我删除
的整个 class 属性时class="form-control upladfieldset notes-field"
内边框阴影出现，但当然我所有其他样式都消失了，这并不理想。所以我也尝试在那些 classes 中注释掉 CSS 的个别行以查看哪一行导致了冲突，但是唯一让内部阴影出现的是如果我删除 class 属性声明一共。
这是我正在使用的 CSS。
.form-control
{
color: #34495e;
border-color: transparent;
border: none !important;
border-bottom-width: 0px;
border-bottom: none;
font-size: 16px;
line-height: 1.467;
padding: 8px 12px 8px 66px;
height: 54px;
-webkit-appearance: none;
-webkit-box-shadow: none;
box-shadow: none;
-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;
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);
}
嗯...你这里有很多事情要做，但我相信我可能已经达到了你想要的结果（我不是 100% 确定我明白你想要什么，但我在假设您希望文本区域包含与输入字段相同的边框和框阴影）。我认为这里的主要问题主要与层次结构基础有关。正因为如此，我觉得在我们在这里处理实际代码之前应该说一些事情。原则上，您应该在样式表的顶部设置更通用的规则，在向下放置时设置更具体的规则。重置（文本区域、输入等原始元素）应该在顶部——或者至少在您希望应用到这些元素的 类 之上。
此外，我强烈建议您避免使用 !important。如果您发现自己需要使用 !imporant，这通常意味着您的真正问题出在其他地方。它表明您现在正试图对抗 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">
您可以看到这两个字段的样式化方式相同。希望对您有所帮助。