web-dev-qa-db-ja.com

materialize.css入力フィールドのデフォルトの色を変更します。スクリーンショットを添付しました

Please see attachment

カスタムCSSを追加しようとしましたが、機能しませんでした。入力フィールドを選択した後、テキストの色を変更する必要があります。

<div class="input-field form-group">
    <input id="first_name" class="active validate form-control" name="first_name" type="text" value="">
    <label for="first_name" class="mat-label">First Name</label>
</div>
materialize
7
Dipayan Das

SCSSファイルを編集する必要がありますが、より簡単な方法です。ただし、すばやく実行したい場合は、次のcssを使用してください。ここではロイヤルブルーを使用しましたが、どの六角色でも使用できます。

下の境界線用

input:focus {
  border-bottom: 1px solid royalblue !important;
  box-shadow: 0 1px 0 0 royalblue !important;
}

ラベルの色について

label.active {
  color: royalblue !important;
}
3
Truly

このグリーンは実際には$secondary-color

したがって、SASSでは、次のように変更できます。

$secondary-color: #FEBD09;

@import "materialize-css/sass/components/variables";
2
Pierre de LESPINAY

線の色については、以下のcssでデフォルトの緑を黒に変更することができました。

input:not([type]):focus:not([readonly]), input[type="text"]:not(.browser-default):focus:not([readonly]), input[type="password"]:not(.browser-default):focus:not([readonly]), input[type="email"]:not(.browser-default):focus:not([readonly]), input[type="url"]:not(.browser-default):focus:not([readonly]), input[type="time"]:not(.browser-default):focus:not([readonly]), input[type="date"]:not(.browser-default):focus:not([readonly]), input[type="datetime"]:not(.browser-default):focus:not([readonly]), input[type="datetime-local"]:not(.browser-default):focus:not([readonly]), input[type="tel"]:not(.browser-default):focus:not([readonly]), input[type="number"]:not(.browser-default):focus:not([readonly]), input[type="search"]:not(.browser-default):focus:not([readonly]), textarea.materialize-textarea:focus:not([readonly]) {
    border-bottom: 1px solid black;
    -webkit-box-shadow: 0 1px 0 0 black;
    box-shadow: 0 1px 0 0 black;
}
2
smoore4

Sassを使用すると、サイトの配色を非常にすばやく変更できます。

入力/フォームのスタイルを変更するには、10の下の変数を変更するだけです。フォーム： https://github.com/Dogfalo/materialize/blob/master/sass/components/_variables.scss

値を変更した後、SASSコマンドラインを使用して新しいCSSファイルを作成する必要があります

また、チェックしてください： http://materializecss.com/sass.html 、 http://sass-lang.com/

1
flosommerfeld

次のようなコードを変更することで、テキストの色を簡単に変更できます。

<div class="input-field form-group">
<input id="first_name" class="active validate form-control" name="first_name" type="text" value="">
<label for="first_name" class="mat-label">
<span class="black-text">First Name</span>
</label>
</div>

つまり、カラークラスに-textを追加します。チェック：http://materializecss.com/color.html

0
Dheeraj

これはCSSであり、入力アニメーションテキストのマテリアライズの色を変更できます

input:not([type]):focus:not([readonly])+label,.form-wrap input[type=text]:not(.browser-default):focus:not([readonly])+label,.form-wrap input[type=password]:not(.browser-default):focus:not([readonly])+label,.form-wrap input[type=email]:not(.browser-default):focus:not([readonly])+label,.form-wrap input[type=url]:not(.browser-default):focus:not([readonly])+label,.form-wrap input[type=time]:not(.browser-default):focus:not([readonly])+label,.form-wrap input[type=date]:not(.browser-default):focus:not([readonly])+label,.form-wrap input[type=datetime]:not(.browser-default):focus:not([readonly])+label,.form-wrap input[type=datetime-local]:not(.browser-default):focus:not([readonly])+label,.form-wrap input[type=tel]:not(.browser-default):focus:not([readonly])+label,.form-wrap input[type=number]:not(.browser-default):focus:not([readonly])+label,.form-wrap input[type=search]:not(.browser-default):focus:not([readonly])+label,.form-wrap textarea.materialize-textarea:focus:not([readonly])+label{

    color: #4285F4; /* after animation color change css */

}

.form-wrap input:focus:not([type]):not([readonly]),.form-wrap input[type="text"]:focus:not(.browser-default):not([readonly]),.form-wrap input[type="password"]:focus:not(.browser-default):not([readonly]), input[type="email"]:focus:not(.browser-default):not([readonly]),.form-wrap input[type="url"]:focus:not(.browser-default):not([readonly]), input[type="time"]:focus:not(.browser-default):not([readonly]),.form-wrap input[type="date"]:focus:not(.browser-default):not([readonly]), input[type="datetime"]:focus:not(.browser-default):not([readonly]),.form-wrap input[type="datetime-local"]:focus:not(.browser-default):not([readonly]), input[type="tel"]:focus:not(.browser-default):not([readonly]),.form-wrap input[type="number"]:focus:not(.browser-default):not([readonly]), input[type="search"]:focus:not(.browser-default):not([readonly]),.form-wrap textarea.materialize-textarea:focus:not([readonly]){

    border-bottom: 1px solid #4285F4;
    box-shadow: 0 1px 0 0 #4285F4; /* after animation color change css */

}
0
Dipayan Das