在MaterialiseCSS中更改`input-field`颜色

Question

我正在创建一个供个人使用的个人网站，使用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

Answer 1

是的，这是可能的。

颜色由CSS显示（或者在本例中用SASS编写）。

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

您可以更改文件中的输入颜色和其他变量： 物化/ SASS /组件/ _variables.scss

然后将其编译回css。 多数民众赞成。

最好的问候

Answer 2

尝试以下css，

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

label{
    color: red;
}