NativeScript button text colour

0
votes

I'm trying to style a button text colour but it wont change from blue. My html file:

<StackLayout>
    <Label text="Username" textWrap="true"></Label>
    <TextField hint="Enter Username" text=""></TextField>
    <Label text="Password" textWrap="true"></Label>
    <TextField hint="Enter your password." text="" secure="true"></TextField>
    <Button text="Sign in"></Button>
</StackLayout>

CSS:

button {
    color: #fff;
    font-size: 14;
    background-color: #000;
    border-radius: 20;
    text-transform: uppercase;
    padding:10;
    margin: 10 0;
}

however the button text colour always remains blue, and i can't seem to get it to be white.

2
nativescriptangular2-nativescript
Just remove text-transform: uppercase; from button style in your CSS file and the color will be changed. There is some issue while using text-transform. - Nikolay Tsonev
@NikolayTsonev yeah you were right, this comment is the correct answer if you wanna create it and i'll accept it :) - Flakx

2 Answers

1
votes

In case you want to change text color of a Button, while text-transform has been set to uppercase or lowercase, the color of the text would not be applied. This is an issue only for iOS. In regard to that I opened new issue in NativeScript repo in GitHub #2601

1
votes

Since you are styling using the element you should try capitalizing button -> 

Button{
  color: #fff;
    font-size: 14;
    background-color: #000;
    border-radius: 20;
    text-transform: uppercase;
    padding:10;
    margin: 10 0;
}