在物化中更改表单元素的颜色

Question

我如何更改表单输入元素（文本、密码、标签、选择、文本区域）标签和边框底部的颜色。 ** 我尝试了 Materialise CSS 文档中提到的样式。但它不起作用。**

<div class="col s12 m6 l6 input-field" >
                <input type="text" name="user" id="user"  class="cng">
                <label for="user">User Name</label>
            </div>
            <div class="col input-field s12 m6 l6" >
                <input type="password" name="pass" id="pass">
                <label for="pass">Password</label>
            </div>

Answer 1

使用SASS

Materialize 的资源是从 .sass 文件编译的，您所引用的颜色可以从

variablies.scss

文件进行编辑。

改变：

$secondary-color: color("red", "darken-1") !default;

您想要的任何颜色并编译 SCSS。

或者使用此处

中的辅助颜色

Answer 2

试试这个：

<div class="col s12 m6 l6 input-field" >
                <input type="text" name="user" id="user"  class="cng">
                <label id="f-label" for="user">User Name</label>
            </div>
            <div class="col input-field s12 m6 l6" >
                <input type="password" name="pass" id="pass">
                <label id="s-label" for="pass">Password</label>
            </div>

CSS：

#user, #pass {
        border-bottom: 1px solid #yourcolor;
}

#user:focus, #pass:focus{
        border-bottom: 1px solid #yourcolor;
        box-shadow: 0 1px 0 0 #yourcolor;
}


#f-label, #s-label {
        color: #yourcolor;
}