web-dev-qa-db-fra.com

Changer la couleur de l'entrée soulignée et l'étiquette dans la structure Materialize.css

J'utilise le framework Materialize.css et j'ai remarqué que la couleur des champs de texte input est verte et qu'il en est de même de label.

Y at-il un moyen de changer la couleur en quelque chose de différent?

<input type="text" id="username" />
<label for="username">Username</label>
htmlcsshtml5materialize
14
TimmyO18

Vous pouvez, selon Matérialiser Docs en utilisant:

 /* label focus color */
   .input-field input[type=text]:focus + label {
     color: #000;
}
/* label underline focus color */
   .input-field input[type=text]:focus {
     border-bottom: 1px solid #000;
     box-shadow: 0 1px 0 0 #000;
   }

Fragment

/*** !important was needed for snippet ***/



/* label focus color */
 .input-field input:focus + label {
   color: red !important;
 }
 /* label underline focus color */
 .row .input-field input:focus {
   border-bottom: 1px solid red !important;
   box-shadow: 0 1px 0 0 red !important
 }
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" rel="stylesheet" />
<link rel="stylesheet" href="http://fonts.googleapis.com/icon?family=Material+Icons">
<div class="row">
  <form class="col s12">
    <div class="row">
      <div class="input-field col s6">
        <i class="material-icons prefix">account_circle</i>
        <input id="icon_prefix" type="text" class="validate">
        <label for="icon_prefix">First Name</label>
      </div>
      <div class="input-field col s6">
        <i class="material-icons prefix">phone</i>
        <input id="icon_telephone" type="tel" class="validate">
        <label for="icon_telephone">Telephone</label>
      </div>
    </div>
  </form>
</div>

29
dippas

La réponse des dippas est correcte, mais si vous voulez que textareas soit de la même couleur, vous devez définir ces règles CSS:

/* label focus color */
    .input-field input[type=text]:focus + label, .materialize-textarea:focus:not([readonly]) + label {
     color: #005eed !important;
    }

/* label underline focus color */
    .input-field input[type=text]:focus, .materialize-textarea:focus:not([readonly]) {
     border-bottom: 1px solid #005eed !important;
     box-shadow: 0 1px 0 0 #005eed !important;
    }

Notez la règle .materialize-textarea pour l'étiquette et le bas de la bordure.

5
manuman94

Dans la documentation, indiquez comment vous pouvez définir la couleur par défaut de matérialiser. Vous devez télécharger les fichiers sass dans votre projet, puis modifier ces variables. 

Vous devez aller à /sass/components/forms/*/ pour définir l'élément dont vous avez besoin.

Dans tous les éléments, vous pouvez voir que la couleur est le $secondary-color, cette variable que vous pouvez trouver dans le fichier /sass/components/_variables.scss, et vous pouvez changer sa valeur en couleur pour tout votre projet. 

1
faherrera

enfin, j'ai trouvé la solution. Vous devez changer la couleur pour actif et non actif.

ICÔNES:

.material-icons{
  color: #1a237e !important;
  }

.material-icons.active {
  color: #b71c1c !important;
  }

CHAMP DE TEXTE:

.input-field input[type=text] + label, .materialize-textarea:focus:not([readonly]) + label {
 color: #1a237e !important;
}

.input-field input[type=text], .materialize-textarea:focus:not([readonly]) {
 border-bottom: 1px solid #1a237e !important;
 box-shadow: 0 1px 0 0 #1a237e !important;
}


.input-field input[type=text]:focus + label, .materialize-textarea:focus:not([readonly]) + label {
 color: #b71c1c !important;
}

.input-field input[type=text]:focus, .materialize-textarea:focus:not([readonly]) {
 border-bottom: 1px solid #b71c1c !important;
 box-shadow: 0 1px 0 0 #b71c1c !important;
}
0
Let's Yo