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