Question

如何更改输入input-field MaterializeCSS的文字颜色？ documentation演示了如何更改标签或下划线的颜色，而不是文本的颜色。

 /* 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模板。随着萨斯，你可以通过改变变量来实现这一点。 CSS如下所示没有前瞻。根据您的使用情况，您可能需要更改类型属性选择器。

但不澄清哪些sass变量可供更改。

Answer 1

只需通过它的CSS类选择输入字段的包装器<div>即可更改文本颜色。

.input-field {
     color:orange;
}

小提琴：https://jsfiddle.net/Lxx2k0fq/

要更改占位符文字颜色，请参阅：Change an HTML5 input's placeholder color with CSS

关于SASS：看起来Materialise中只定义了全局文本颜色，默认情况下它也适用于您的输入字段。在_variables.scss中，您可以找到负责颜色的$ off-black变量。它已应用于<html>代码，因此更改它会改变整个页面的文字颜色。

Answer 2

迈克尔的回答没有帮助我，但这就是我得到的。

.input-field [type=text] {
    color: white;
}

确保添加[type=text]

Answer 3

const getValue = arg => arg + arg;
const html = `<p>Hello ${getValue("a")}</p>`;
document.write(html);

将类更改为所需的颜色

Answer 4

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>

see the result input text here

如何在MaterialiseCSS中更改输入字段的文本颜色？

4 个答案: