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

Posted 2023-02-22

【中文标题】更改 MaterializeCSS 中的“输入字段”颜色

【英文标题】：Changing the `input-field` color in 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

【参考方案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;