Twitter bootstrap 引导材质设计输入标记更改默认青色_Twitter Bootstrap_Input_Colors_Material Design

Twitter bootstrap 引导材质设计输入标记更改默认青色

twitter-bootstrap input colors

Twitter bootstrap 引导材质设计输入标记更改默认青色,twitter-bootstrap,input,colors,material-design,Twitter Bootstrap,Input,Colors,Material Design,大家好，我正在尝试将引导材质设计输入标记绿色的默认颜色更改为各种不同的颜色，我已经在这里看到了一个解决方案（），但它似乎不起作用，我用谷歌搜索了许多可能的方法，但没有得到解决方案，我不知道我在这里遗漏了什么，下面是我的示例代码，我尝试了所有必要的文件。所有从属文件仅从官方网站获取 <!DOCTYPE html> <html> <head> <title>Bootstrap Material Design</title>

大家好，我正在尝试将引导材质设计输入标记绿色的默认颜色更改为各种不同的颜色，我已经在这里看到了一个解决方案（），但它似乎不起作用，我用谷歌搜索了许多可能的方法，但没有得到解决方案，我不知道我在这里遗漏了什么，下面是我的示例代码，我尝试了所有必要的文件。所有从属文件仅从官方网站获取

<!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>


自举材料设计
名称
$.material.init（）

请检查此内容，如果我有任何错误或遗漏了任何内容，请建议我，请提前通知我。

要做到这一点，您需要覆盖

材质样式
添加css
.form-group.is-focused .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
}

以下是一个较少使用的示例：

如果您使用的是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;
}

是的，作为我的例外，它的作品很好，谢谢你友好的回复，但如果我有一个验证（必需），所以它必须以红色显示，在这种情况下，我们给出的任何颜色，同样的颜色也反映了验证“名称”。1秒。莱姆check@AjayKumar你能发送演示的任何链接来显示此表单验证吗？请参考此链接以获取我尝试使用表单验证的文件validation@AjayKumar我明白了。。删除！重要信息来自处理错误的代码。更新了我的答案
@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);
}

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