Search code examples
htmlcssangularnativescript

Can't change fonts in TextField in NativeScript


I just started with NativeScript/Angular and I am not the best with html and css and would like to style the hint font in the TextFields. like changing the color, font-size, ... I am not sure why it does not work in the "input-field" class. I would be very thankful, if you someone could answer soon, thank you:)

.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>


Solution

  • I found a working solution. You can use style.placeholderColor for changing the color, for example: style.placeholderColor="white" in the TextField tag

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