Bootstrap 材料设计输入标签更改默认青色答案

【问题标题】：Bootstrap material design input tag change default teal colorBootstrap 材料设计输入标签更改默认青色
【发布时间】：2016-08-19 05:16:05
【问题描述】：

大家好，我正在尝试将 Bootstrap 材料设计输入标签绿色的默认颜色更改为各种不同的颜色，我已经在这里看到了一个解决方案（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>

如果我有任何错误或遗漏任何内容，请检查并建议我，请告诉我，提前谢谢。

【问题讨论】：

标签： twitter-bootstrap input colors material-design

【解决方案1】：

为此，您需要覆盖material styles。

添加css

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

如果你想默认给border（不专注的情况）

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

【讨论】：

是的，作为我的例外，它可以正常工作，感谢您的友好回复，但如果我有验证（必需），所以它必须以红色显示，在这种情况下是什么颜色我们给了，同样的颜色也反映了验证 '
Name
' .
1 秒。让我检查
@AjayKumar 能否请您发送任何显示此表单验证的演示链接？
请参阅此链接dropbox.com/s/8yzfvl80oagrna2/bmd.zip?dl=0 以获取我尝试使用表单验证的文件
@AjayKumar 我遇到了问题 .. 从代码中删除 !important 以处理错误。更新了我的答案

【解决方案2】：

这里是一个少的例子：

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);
}

【讨论】：

【解决方案3】：

如果您使用的是 MDBOOSTRAP，那么这就是解决方案。对于输入试试这个：

input[type=text]:focus:not([readonly]) {
  border-bottom: 1px solid black;
  box-shadow: 0 1px 0 0 black;
}

对于标签：

input[type=text]:focus:not([readonly])+label{
  color: black;
}

【讨论】：