如何在MaterializeCSS中更改输入字段的文本颜色？
如何更改输入到input-field of MaterializeCSS中的文本颜色？文档演示如何更改标签或下划线的颜色，但不更改文本的颜色。
/* label color */
.input-field label {
color: #000;
}
/* label focus color */
.input-field input[type=text]:focus + label {
color: #000;
}
/* label underline focus color */
.input-field input[type=text]:focus {
border-bottom: 1px solid #000;
box-shadow: 0 1px 0 0 #000;
}
/* valid color */
.input-field input[type=text].valid {
border-bottom: 1px solid #000;
box-shadow: 0 1px 0 0 #000;
}
/* invalid color */
.input-field input[type=text].invalid {
border-bottom: 1px solid #000;
box-shadow: 0 1px 0 0 #000;
}
/* icon prefix focus color */
.input-field .prefix.active {
color: #000;
}文档还指出，可以修改sass变量：
下面是一个CSS模板，用于修改CSS中的输入字段。使用Sass，您可以通过更改变量来实现这一点。下面显示的CSS是无前缀的。根据您使用的内容，您可能必须更改类型属性选择器。
但没有说明哪些sass变量可以更改。
回答 5
Stack Overflow用户
发布于 2016-09-03 14:03:50
只需根据输入字段的CSS类选择输入字段的包装器<div>，即可更改文本颜色。
.input-field {
color:orange;
} 小提琴：https://jsfiddle.net/Lxx2k0fq/
有关更改占位符文本颜色，请参阅：用CSS更改HTML5输入的占位符颜色
关于SASS:看起来只有在物化中定义的全局文本颜色，这在默认情况下也适用于您的输入字段。在_variables.scss中，您可以找到对颜色负责的$off-black变量。它应用于<html>标记，因此更改它将改变整个页面的文本颜色。
Stack Overflow用户
发布于 2019-01-17 15:45:32
迈克尔的回答对我没有帮助，但这就是我所得到的。
.input-field [type=text] {
color: white;
}确保添加[type=text]
Stack Overflow用户
发布于 2020-12-17 08:03:23
CSS
/*============ CSS ==================== */
.input-field input:focus + label {
color: white !important;
background-color: rgb(50,50,50);
}
/* label underline focus color */
.input-field input:focus {
border-radius: 0.5rem;
background-color: rgb(50,50,50);
}
.input-field #qty {
border:none;
border-radius: 0.5rem;
padding: 1rem;
/*============================ Here ===========================*/
color: white; /* <----------- " This changes the input text color "*/
background-color: rgb(50,50,50);
}HTML
<div class="input-field" type='qty'>
<input id="qty" type='number' label='date'style='border:none'></input>
<label class="super" type="qty" for="supplier" style="pointer-events: none;">quantity</label>
</div>
https://stackoverflow.com/questions/39307358
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号