web-dev-qa-db-ja.com

Materialize.cssフレームワークで下線入力とラベルの色を変更する

Materialize.cssフレームワークを使用していますが、テキストinputフィールドの色が緑色で、labelも緑色であることに気付きました。

色を別のものに変更する方法はありますか？

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

Materialize Docs に従って、以下を使用してできます：

 /* 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;
   }

スニペット

/*** !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>
33
dippas

ディッパの答えは正しいですが、テキストエリアを同じ色にしたい場合は、次の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;
    }

ラベルと境界線の下部の.materialize-textareaルールに注意してください。

7
manuman94

2019年に誰かがここにいて、マテリアライズの新しいバージョン（1.0.0）でこれを試してみる場合および cssで！importantを使用すると、以下のスニペットが機能しました。

注：これは、特定のフィールド、つまりテキストが必要な場合はすべての入力フィールドに適用され、[type]を[type = text]に変更します。

    /* Inactive/Active Default input field color */
    .input-field input[type]:not([readonly]),
    .input-field input[type]:focus:not([readonly]),
    .input-field textarea:not([readonly]),
    .input-field textarea:focus:not([readonly]) {
        border-bottom: 1px solid #01579b;
        box-shadow: 0 1px 0 0 #01579b;
    }

    /* Inactive/Active Default input label color */
    .input-field input[type]:focus:not([readonly])+label,
    .input-field textarea:focus:not([readonly])+label {
        color: #01579b;
    }

    /* Active/Inactive Invalid input field colors */
    .input-field input[type].invalid,
    .input-field input[type].invalid:focus,
    .input-field textarea.invalid,
    .input-field textarea.invalid:focus {
        border-bottom: 1px solid #e57373;
        box-shadow: 0 1px 0 0 #e57373;
    }

    /* Active/Inactive Invalid input label color */
    .input-field input[type].invalid:focus+label,
    .input-field input[type].invalid~.helper-text::after,
    .input-field input[type].invalid:focus~.helper-text::after, 
    .input-field textarea.invalid:focus+label,
    .input-field textarea.invalid~.helper-text::after,
    .input-field textarea.invalid:focus~.helper-text::after {
        color: #e57373;
    }

    /* Active/Inactive Valid input field color */
    .input-field input[type].valid,
    .input-field input[type].valid:focus,
    .input-field textarea.valid,
    .input-field textarea.valid:focus {
        border-bottom: 1px solid #26a69a;
        box-shadow: 0 1px 0 0 #26a69a;
    }

    /* Active/Inactive Valid input label color */
    .input-field input[type].valid:focus+label,
    .input-field input[type].valid~.helper-text::after,
    .input-field input[type].valid:focus~.helper-text::after,
    .input-field textarea.valid:focus+label,
    .input-field textarea.valid~.helper-text::after,
    .input-field textarea.valid:focus~.helper-text::after {
        color: #26a69a;
    }

スニペット

<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  <style type="text/css">
    .input-field input[type]:not([readonly]),
    .input-field input[type]:focus:not([readonly]),
    .input-field textarea:not([readonly]),
    .input-field textarea:focus:not([readonly]) {
      border-bottom: 1px solid #01579b;
      box-shadow: 0 1px 0 0 #01579b;
    }
    
    .input-field input[type]:focus:not([readonly])+label,
    .input-field textarea:focus:not([readonly])+label {
      color: #01579b;
    }

    .input-field input[type].invalid,
    .input-field input[type].invalid:focus,
    .input-field textarea.invalid,
    .input-field textarea.invalid:focus {
      border-bottom: 1px solid #e57373;
      box-shadow: 0 1px 0 0 #e57373;
    }
    
    .input-field input[type].invalid:focus+label,
    .input-field input[type].invalid~.helper-text::after,
    .input-field input[type].invalid:focus~.helper-text::after, 
    .input-field textarea.invalid:focus+label,
    .input-field textarea.invalid~.helper-text::after,
    .input-field textarea.invalid:focus~.helper-text::after {
      color: #e57373;
    }

    .input-field input[type].valid,
    .input-field input[type].valid:focus,
    .input-field textarea.valid,
    .input-field textarea.valid:focus {
      border-bottom: 1px solid #26a69a;
      box-shadow: 0 1px 0 0 #26a69a;
    }
    
    .input-field input[type].valid:focus+label,
    .input-field input[type].valid~.helper-text::after,
    .input-field input[type].valid:focus~.helper-text::after,
    .input-field textarea.valid:focus+label,
    .input-field textarea.valid~.helper-text::after,
    .input-field textarea.valid:focus~.helper-text::after {
      color: #26a69a;
    }
  </style>
</head>

<body>
  <div class="input-field">
    <input id="email" name="email" type="email" class="validate" required="required" autofocus>
    <label for="email">Email</label>
    <span class="helper-text" data-error="Must be a valid email" data-success="Perfect!"></span>
  </div>
  </div>
  <div class="row">
    <div class="input-field">
      <input id="password" name="password" type="password"class="validate"  required="required" minlength="6">
      <label for="password">Password</label>
      <span class="helper-text" data-error="Must have 6 or more characters" data-success="Perfect!"></span>
    </div>
  </div>
  <div class="row">
    <div class="input-field">
      <textarea id="textarea" name="textarea" class="materialize-textarea validate" required="required" minlength="6"></textarea>
      <label for="textarea">Textarea</label>
      <span class="helper-text" data-error="Must have 6 or more characters" data-success="Perfect!"></span>
    </div>
  </div>
</body>
2
runninghair08

ドキュメントでは、マテリアライズのデフォルト色を設定する方法を説明しています。 sassファイルをプロジェクトにダウンロードし、それらの変数を変更する必要があります。

/sass/components/forms/*/にアクセスして、必要な要素を設定する必要があります。

すべての要素で、色が$secondary-colorであることがわかります。この変数は/sass/components/_variables.scssファイルで見つけることができ、すべてのプロジェクトの値を色に変更することができます。

1
faherrera

最後に、解決策を見つけました。アクティブと非アクティブの色を変更する必要があります。

アイコン：

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

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

テキストフィールド：

.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