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

问题描述：

我有一个表单提交按钮，我试图改变颜色。这应该是非常简单的，但我的CSS不工作，我不明白为什么。HTML输入提交按钮不会改变颜色

的CSS：

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

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

这是推动我坚果，任何帮助，将不胜感激。

答

的问题是在你的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; 
}

为什么有人会声明一种颜色，然后使其透明以便它永远不会显示？好奇 –

答

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

答

看来有两个问题。

第一个是Tieson T在他的评论中提到的。这是你的选择器正在被更具体的选择器覆盖。这可以通过使用“不重要”的“！重要”来“固定”，但这是解决这个问题的简单方法。

另一个问题是，提交按钮需要您设置文字阴影。尝试了这一点：

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; 
}

那么另一个选择是从这个规则中删除的文字阴影属性，那么你将不需要它在第一条规则中指定。

UPDATE

作为查瓦G，在注释的另一原因的颜色没有显示是因为-webkit文本 - 填充 - 色被设定为透明指出。

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

上面的输入css规则有点“困惑”，它设置了“color”属性，这可能意味着您希望文本具有某种颜色，但会应用隐藏在文本后面的文本阴影。其次，它使文本本身透明，所以它不再隐藏与“颜色”属性设置不同颜色的阴影。

之所以文字阴影代替文本颜色的显示是因为它使得在'文本填充color'规则填充透明。把它拿走，你不需要重写阴影。（或者如果你离开它，并覆盖阴影，你将不需要重写颜色......） –

答

如果您检查输入，你会看到它采取从下面的代码块的颜色，它有更具体的选择：

.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与红色文本。

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

答

由于您在登录按钮被禁用时，你需要做这样的事情。

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

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

相关推荐