HTML：Material Design Lite 更改用户在输入字段中输入的文本的颜色答案

【问题标题】：HTML: Material Design Lite change the color of the text that the user enters into an input fieldHTML：Material Design Lite 更改用户在输入字段中输入的文本的颜色
【发布时间】：2017-01-02 16:31:47
【问题描述】：

对于我正在创建的应用程序，这个特定页面的背景是黑色的，当用户在框中输入输入时，他们输入的文本是黑色的，因此不可见。

<head>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
    <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</head>

<body>
    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
        <input class="mdl-textfield__input" type="text" name="Username"/>
        <label class="mdl-textfield__label" style="color:#b272a9;" for="Username">Username</label>
    </div>

</body>

如何更改 MDL 中的输入文本颜色？

【问题讨论】：

标签： html css material-design

【解决方案1】：

请删除style="color:#b272a9;"

【讨论】：

这不能回答问题。

【解决方案2】：

这就是你所做的，我已经“模拟”了你的条件，最初看起来都是黑色的。

http://codepen.io/damianocel/pen/MJgRLQ

我所做的是

input{
background:black;
color:silver !important;
border:1px white solid !important;
}

此外，作为一般规则，在使用 CMS 平台时，有时 !important 规则是摆脱混乱的唯一方法：-)

【讨论】：

这行得通，但 MDL 是导致问题的原因。 Look here 如您所见，当我们包含 MDL 时，它会使文本字段不可见并且不会更改文本颜色。
AHA:-) 然后添加：color:silver !important;边框：1px 白色纯色 !important;
最奇怪 - 大多数 CMS 会将任何基于标签的样式解释为具有比标签可能继承的类中指定的优先级更高的优先级。 !Important 有效，但实际上没有必要。
@David P 根据我的经验，CMS 和这类框架通常是最后的手段和方法。现在我不知道 MDL，但通常那些框架内联样式不是直接计算的，它们是事后解析的，不符合真正的内联样式。我知道，这听起来很奇怪，我认为角度等可怕的做法。对我来说，它阻塞了标记，而 sep 的关注点在窗外，地狱，js 内联样式至少我看到了一些好处:-)

【解决方案3】：

只需将标签的颜色设置为您想要的文本颜色

<input type="text" style="color:white">

【讨论】：