更改 MaterializeCSS 中的“输入字段”颜色答案

【问题标题】：Changing the `input-field` color in MaterializeCSS更改 MaterializeCSS 中的“输入字段”颜色
【发布时间】：2018-02-03 10:34:15
【问题描述】：

我正在制作个人网站供个人使用，使用MaterializeCSS作为设计模板。

我想知道是否可以像这样更改输入字段的绿色

换成另一种颜色，比如红色。

我有两个输入字段，一个用户名字段和一个密码字段，代码如下：

<div class="row">
    <form class="col s12" action="?p=SignIn" method="post">
      <div class="row">
        <div class="input-field col s3">
          <input id="UserName" type="text" class="validate white-text" name="UserName">
          <label for="UserName">Username</label>
        </div>
      </div>
      <div class="row">
        <div class="input-field col s3">
          <input id="Password" type="password" class="validate white-text" name="Password">
          <label for="Password">Password</label>
        </div>
      </div>

如前所述，我使用的是MaterializeCSS

【问题讨论】：

标签： css material-design materialize

【解决方案1】：

是的，这是可能的。

颜色由 CSS 显示（或者在这种情况下用 SASS 编写）。

我查看了这个文件：materialize/sass/components/forms/_input-fields.scss 我们有变量：$input-focus-color

您可以更改文件中的输入颜色和其他变量： materialize/sass/components/_variables.scss

然后将其编译回css。就是这样。

最好的问候

【讨论】：

【解决方案2】：

试试下面的css，

input, input:focus { 
    background-color: black;
}

label{
    color: red;
}

【讨论】：