HTML 输入提交按钮不会改变颜色

Question

我有一个带有提交按钮的表单，我正在尝试将颜色更改为该按钮。这应该很简单，但我的 css 不起作用，我不知道为什么。

CSS：

input[type="submit"]{color: red;}

小提琴： https://jsfiddle.net/zn7xrv60/

这让我发疯，任何帮助将不胜感激。

Answer 1

问题出在您的input文本阴影中，请尝试像下面一样更改它，然后根据需要进行更改。

从

input{
color: #f08200;
text-shadow: 0px 0px 0px #000;
-webkit-text-fill-color: transparent;
}

自

input{
color: #f08200;
text-shadow: 0px 0px 0px red;
-webkit-text-fill-color: transparent;
}

Answer 2

.login_content .container input[type="submit"] {
background: red;
}

Answer 3

如果您检查该输入，您将看到它从以下代码块中获取颜色，该代码块具有更具体的选择器：

.login_content .container input[type="submit"]{
width: auto;
padding: 10px 50px;
border-radius: 25px;
background: #e8e8e8;
color: #c5c5c5;
text-transform: uppercase;
border: none;
cursor: pointer;
}

此外，input标签上的此规则表示文本颜色应该是透明的：

-webkit-text-fill-color: transparent;

这是带有红色文本的jsFiddle。

使用浏览器的开发工具进行此类调试。

Answer 4

因为您的登录按钮在您需要执行此操作时被禁用。

.login_content .container .submit input:disabled {
//css
}

Answer 5

似乎有两个问题。

首先是Tieson T在他的评论中提到的。 也就是说，您的选择器被更具体的选择器覆盖。 这可以通过使用"！important"来"修复"，这不是首选，但可以解决此类问题的简单方法。

另一个问题是提交按钮要求您设置文本阴影。 试试这个：

input[type="submit"]
{
color: red !important;
text-shadow: 0px 0px 0px red !important;
}

此 CSS 规则导致您必须覆盖文本阴影：

input{
color: #f08200;
text-shadow: 0px 0px 0px #000;
-webkit-text-fill-color: transparent;
}

因此，另一种选择是从此规则中删除文本阴影属性，然后就不需要在第一个规则中指定它。

更新

正如Chava G在评论中指出的那样，颜色没有显示的另一个原因是因为-webkit-text-fill-color设置为透明。

此外，由于文本阴影没有垂直或水平偏移，因此如果 -webkit-text-fill-color 不透明，阴影将不可见。

上面的输入 css 规则有点"混乱"，它设置了"color"属性，这可能意味着您希望文本具有某种颜色，但随后应用隐藏在文本后面的文本阴影。 其次，它使文本本身透明，因此它不再隐藏阴影，阴影的颜色与为"color"属性设置的颜色不同。