2

I have tried to change the color of the text in input in AngularJS Material with CSS but somehow haven't got it to work. What am I doing wrong?

This is my input field:

<md-input-container>
        <label>Title</label>
        <input ng-model="user.title">
</md-input-container>

and this is how I have tried to change the color of the text.

<md-input-container style='color:#e52973'>
        <label>Title</label>
        <input style='color:#e52973' ng-model="user.title">
</md-input-container>
7
  • Something like input{background-color:#e52973} ? Commented May 6, 2018 at 15:29
  • Where should I put that? Commented May 6, 2018 at 15:30
  • in your css file, then link it to the html Commented May 6, 2018 at 15:31
  • How is that different from what I'm doing right now? Commented May 6, 2018 at 15:33
  • It's not, it's just the convention. Commented May 6, 2018 at 15:37

1 Answer 1

2

You need to use !important with your style attributes to override defaults.

Also you just need to apply style on input not to md-input-container to change color of input text.

So your current code:

<md-input-container style='color:#e52973'>
        <label>Title</label>
        <input style='color:#e52973' ng-model="user.title">
</md-input-container>

Change to:

<md-input-container>
        <label>Title</label>
        <input style='color:#e52973 !important' ng-model="user.title">
</md-input-container>

Working codepen example: https://codepen.io/anon/pen/VxrjEx

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.