无法更改 NativeScript 中 TextField 中的字体

Question

我刚开始使用 NativeScript/Angular，我对 html 和 css 不是最好的，我想设置 hint 字体的样式在文本字段中。比如更改颜色、字体大小……我不确定为什么它在“输入字段”class 中不起作用。如果有人能尽快回答，我将不胜感激:)

.form {
    background-color: #6F9DE1;
    margin-top: 2.3%;
    margin-bottom: 10%;
}

.header {
    font-size: 25;
    text-align: center;
    color: #111;
    margin-top: 5%;
    height: 60;
}

.fields {
    margin-bottom: 20%;
    margin-left: 30;
    margin-right: 30;
}

.input-field {
    height: 45;
    margin-bottom: 20;
    background-color: #4587AD;
    border-radius: 100px;
    /* color: #fff;                would like to change the color here */
}

.input {
    font-size: 20;
    color: #fff;
    border-bottom-width: 0;
    border-bottom-color: transparent;
}

.btn-primary {
    height: 40;
    background-color: #6F9DE1;
    font-size: 20;
    font-weight: 200;
    color: #fff;
    border-radius: 100px;
}

.btn-secondary {
    height: 40;
    color: #4587AD;
    border-radius: 100px;
}

<StackLayout>
    <StackLayout class="form">
    <Label class="header" text="Find 2 Do"></Label>
    </StackLayout> 
        <StackLayout class="fields">
            <StackLayout class="input-field">
                <TextField class="input" hint="Full Name"></TextField>
            </StackLayout>

            <StackLayout class="input-field">
                <TextField class="input" hint="Email"></TextField>
            </StackLayout>

            <StackLayout class="input-field">
                <TextField class="input" secure="true" hint="Password"></TextField>
            </StackLayout>

            <StackLayout class="input-field">
                <TextField class="input" secure="true" hint="Confirm Password"></TextField>
            </StackLayout>
        </StackLayout>

    <StackLayout class="btns">
    <Button 
        text="Continue" 
        class="btn btn-primary"
        nsRouterLink="/fullregister" 
    ></Button>

    <Button 
        text="Have an account? Log in" 
        class="btn btn-secondary"
        nsRouterLink="/login" 
    ></Button>
    </StackLayout>
</StackLayout>

Answer 1

你的TextFieldclass是.input.

<TextField class="input" secure="true" hint="Confirm Password"></TextField>

因此，您需要在 .input class.

中进行更改

.input {
    font-size: 20; //change Here
    color: #fff; //change Here
    border-bottom-width: 0;
    border-bottom-color: transparent;
}

希望对您有所帮助:)

Answer 2

我找到了可行的解决方案。您可以使用 style.placeholderColor 来更改颜色，例如：TextField 标签中的 style.placeholderColor="white"

<StackLayout class="input-field">
                <TextField style.placeholderColor="white" class="input" hint="Email" 
                 keyboardType="email"></TextField>
</StackLayout>

无法更改 NativeScript 中 TextField 中的字体

Can't change fonts in TextField in NativeScript

html

css

nativescript

angular