更改materialize.css输入字段的默认颜色。我附上了截图

Question

我试图添加自定义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>

Answer 1

对于线条颜色，我可以使用下面的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;
}

Answer 2

  

使用Sass时，您可以更改站点的配色方案   非常快。

要更改输入/表单的样式，您只需修改 10下的变量。表格的： https://github.com/Dogfalo/materialize/blob/master/sass/components/_variables.scss

更改值后，需要使用SASS命令行

构建新的CSS文件

另请查看：http://materializecss.com/sass.html，http://sass-lang.com/

Answer 3

这是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 */

}

Answer 4

您可以通过更改

等代码轻松更改文字颜色

<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

Answer 5

一种更简单的方法，尽管您应该编辑SCSS文件。 但是，如果您想快速使用，请使用以下CSS。 我在这里使用了宝蓝色，您可以使用任何十六进制颜色。

对于底部边框

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

对于标签颜色

label.active {
  color: royalblue;
}

Answer 6

此绿色实际上是$secondary-color

因此在SASS中，可以通过以下方法进行更改：

$secondary-color: #FEBD09;

@import "materialize-css/sass/components/variables";