覆盖Native Script中TextField组件的css

Question

我正在尝试在Android的Native Script中更改TextField元素的样式。目前我的文本字段显示为黑色。我想把它变成白色。由于背景很暗。

<TextField cssClass="tf_password" hint="Password" id="password" text="{{ user.password }}" secure="true"/>

感谢任何帮助。

Answer 1

如果您希望文本为白色并且背景为黑色，则可以在CSS文件中设置：

#password {
  background-color: black !important;
  color: white !important;
}

Answer 2

问题不在于如何更改TextField的文本颜色，而是如何更改占位符颜色：

#password {
  background-color: #000;
  color: #fff;

  placeholder-color: #fff; /* ideally different color than normal color */
}

您可以在NativeScript Playground中看到a working example

Answer 3

如果您想更改TextField的颜色，在这种情况下，您可以简单地将color属性赋予TextField。如果您要更改提示颜色，则可以使用placeholder-color属性：

<TextField hint="Password" id="password" text="{{ user.password }}"> 
</TextField>

CSS是

TextField {
     color: #ffffff; // used to define color of input field
     placeholder-color: #000000; // used to define color of hint
}