更改MaterializeCSS中的「輸入字段」顏色

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編寫）。

我看了這個文件了：物化/上海社會科學院/組件/表格/ _Input-fields.scss 在那裏，我們有自己的變量：$輸入焦點色

你可以改變輸入顏色和其他變量文件： materialize/sass/components/_variables.scss

然後將其編譯回css。 就是這樣。

問候

Answer 2

嘗試下面的CSS，

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

label{ 
    color: red; 
}