ブートストラップ素材のデザイン入力タグのデフォルトのティールカラーの変更

こんにちは私はブートストラップ素材の入力タグの緑の色をいろいろな色に変更しようとしていますが、私はすでにここで解決策を見ましたが（https://github.com/FezVrasta/bootstrap-material-design/issues/384）私はそれを可能な限り多くの方法で探知しましたが、解決策を得られなかったので、私が試したすべての必要なファイルとともに、以下に私のサンプルコードがあります。すべての依存ファイルは公式サイトの形式でのみ使用されます。ブートストラップ素材のデザイン入力タグのデフォルトのティールカラーの変更

<!DOCTYPE html> 
<html> 
<head> 
    <title>Bootstrap Material Design</title> 
    <link rel="stylesheet" type="text/css" href="bootstrap.min.css"> 
    <link rel="stylesheet" type="text/css" href="bootstrap-material-design.min.css"> 
    <link rel="stylesheet" type="text/css" href="ripples.min.css"> 
</head> 
<body> 
    <div class="container"> 
     <div class="well"> 
      <div class="form-group label-floating"> 
       <label class="control-label">Name</label> 
       <input type="text" name="" class="form-control"> 
      </div> 
     </div> 
    </div> 
    <script type="text/javascript" src="jquery-2.2.4.min.js"></script> 
    <script type="text/javascript" src="bootstrap.min.js"></script> 
    <script type="text/javascript" src="material.min.js"></script> 
    <script type="text/javascript" src="ripples.min.js"></script> 
    <script type="text/javascript"> 
     $.material.init() 
    </script> 
</body> 
</html>

私は何か間違いがあった場合、または私が何かを逃した場合は、私に教えてください、事前に感謝してください。

出典

2016-08-19 Ajay Kumar

これを行うには、material stylesを上書きする必要があります。

デフォルト（に焦点を当てていない状況）でborderを与えたい場合はCSS

.form-group.is-focused .form-control{ 
     background-image: linear-gradient(#c22, #c11), linear-gradient(#a43, #a11); 
}

を追加

.form-control, .form-group .form-control{ 
    background-image: linear-gradient(#c22, #c11), linear-gradient(#a43, #a11); 
}

ラベルの色を変更するには：

.form-group.is-focused label .form-group.is-focused label.control-label{ 
    color: blue; // any color that you want 
}

出典

2016-08-19 05:29:50

雅私の例外として罰金、あなたの親切な返事をありがとう、しかし場合は、その作品私は、検証（必須）を持っているので、それは持っていなければならない場合赤色で表示する場合は、この場合は私たちが与えた色と同じ色が確認のために反映されます '

Name

'。 –

1秒レムチェック –

@AjayKumarこのフォームの検証を示すデモのリンクを送ってください。 –

以下の例は少ない：

http://codepen.io/mhadaily/pen/PzgWkm

<div class="container"> 
    <div class="well"> 
     <div class="form-group label-floating"> 
      <label class="control-label">Name</label> 
      <input type="text" name="" class="form-control"> 
     </div> 
    </div> 
</div>

とCSS

@input-success: rgba(0,32,132,0.8); 
@input-underline-color: rgba(123,321,312,0.8); 

.form-group.is-focused .form-control { 
    background-image: linear-gradient(@input-success, @input-success), linear-gradient(@input-underline-color, @input-underline-color); 
}

出典

2016-08-19 05:45:35 Majid

ブートストラップ素材のデザイン入力タグのデフォルトのティールカラーの変更

答えて

関連する問題