How can I change the font to be the lighter color in angularjs material?

Question

I'm finding that the color that's being used for the email/password text is hard to read (seems easier on this image...), I'd like to use the lighter whitish grey, how can I modify the code to do this?

screenshot of the color problem

<!-- index.html -->
<md-toolbar layout="row">
<div class="md-toolbar-tools" layout="columns" ng-include="'views/login/login.html'"></div>
</md-toolbar>

<!-- login.html -->
<form name="login" layout="" style="font-size: 0.7em">
<md-input-container>
    <label for="email">email</label>
    <input id="email" name="email" type="email" required/>
</md-input-container>
<md-input-container>
    <label for="password">password</label>
    <input id="password" name="password" type="password" required/>
</md-input-container>
<md-checkbox id="rememberMe" name="rememberMe" aria-label="remember me">remember me</md-checkbox>

adding those classes was an attempt to fix it, I just liked the effect. — xenoterracide
– xenoterracide, Commented Mar 21, 2015 at 20:31

Jeffrey Bosboom · Accepted Answer · 2016-04-17 04:12:57Z

0

You can do this too, in the lables and inputs put the class and style, color white, #FFFFFF

<md-input-container>
    <label for="email"class="md-body-2" style="color: #FFFFFF !important;">email</label>
    <input class="md-body-2" style="color: #FFFFFF !important;" id="email" name="email" type="email" required/>
</md-input-container>
<md-input-container>
    <label class="md-body-2" style="color: #FFFFFF !important;" for="password">password</label>
    <input class="md-body-2" style="color: #FFFFFF !important;" id="password" name="password" type="password" required/>
</md-input-container>
<md-checkbox id="rememberMe" name="rememberMe" aria-label="remember me">remember me</md-checkbox>

edited Apr 17, 2016 at 4:12

Jeffrey Bosboom

13.7k16 gold badges83 silver badges95 bronze badges

answered Apr 17, 2016 at 4:04

user2623518

1

Sign up to request clarification or add additional context in comments.

Comments

Zhorzh Alexandr · Accepted Answer · 2015-03-24 08:33:43Z

-1

Do you want to change input text and label colors? You can do it this way:

input {
    color: white !important;
}

label {
    color: white !important;
}

md-input-container .md-input{
    border-color: white !important;
}

answered Mar 24, 2015 at 8:33

Zhorzh Alexandr

1,4792 gold badges17 silver badges30 bronze badges

1 Comment

hofnarwillie Over a year ago

That will affect the color permanently (i.e. across all themes) , and not just for the current theme.

Collectives™ on Stack Overflow

How can I change the font to be the lighter color in angularjs material?

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related