Modification de la couleur `champ d'entrée` dans MaterializeCSS

Question

Je crée un site Web personnel pour usage personnel, en utilisant MaterializeCSS comme modèle de conception.

Je me demandais si je pouvais changer la couleur verte-ish sur un champ d'entrée comme celui-ci

à une autre couleur, comme le rouge.

J'ai deux champs d'entrée, un champ Nom d'utilisateur, et un champ de mot de passe, avec le code suivant:

<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> 

et comme indiqué précédemment, j'utilise MaterializeCSS

Answer 1

Oui, il est possible.

La couleur est affichée par CSS (ou dans ce cas écrit dans SASS).

j'ai regardé ce dossier jusqu'à: matérialiser/SASS/composants/formes/_INPUT-fields.scss Il nous avons la variable: $ entrée-focus couleur

Vous pouvez modifier les couleurs d'entrée et d'autres variables le fichier: materialize/sass/components/_variables.scss

Ensuite, recompilez-le en CSS. C'est ça.

Cordialement

Answer 2

Essayez le dessous css,

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

label{ 
    color: red; 
}