Question

嗨大家我试图将Bootstrap材料设计输入标签绿色的默认颜色更改为各种不同的颜色，我已经在这里看到了一个解决方案（https://github.com/FezVrasta/bootstrap-material-design/issues/384）但它似乎不起作用，我google了很多可能的方法，但没有得到解决方案，我不知道我在这里缺少什么，下面是我的示例代码，我尝试了所有必要的文件。所有相关文件仅从官方网站获取。

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

如果我有任何错误或错过了任何错误，请查看此建议我，请提前告知我们。

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

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

Answer 3

如果您正在使用MDBOOSTRAP，那么这就是解决方案。对于输入，请尝试以下操作：

<!DOCTYPE html>
<html>
	<head>
		<meta charset='utf-8'/>
		<title>Colorbox Examples</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://www.jacklmoore.com/colorbox/jquery.colorbox.js"></script>
    <style rel="https://www.jacklmoore.com/colorbox/example1/colorbox.css"></style>
  </head>
  <body>
    <div id="myContent">
      <p>Hello World from the content.</p>
    </div>
    
    <a href="#none" id="clickme">Click me</a>
 </body>
</html>

和标签：

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

Bootstrap材料设计输入标签更改默认蓝绿色

3 个答案: