How do I customize Angular Material's input/md-input-container component?

Question

As stated in the title, how do I customize these elements? It seems they are using transparent background which is very difficult to view on most background palettes

Answer 1

To change placeholder color do this, it changes the placeholder color to White:

/* do not group these rules */
.your-pre-defined-container > md-input-container > input::-webkit-input-placeholder {
    color: #FFF;
}
.your-pre-defined-class > md-input-container > input:-moz-placeholder {
    /* FF 4-18 */
    color: #FFF;
}
.your-pre-defined-class > md-input-container > input::-moz-placeholder {
    /* FF 19+ */
    color: #FFF;
}
.your-pre-defined-class > md-input-container > input:-ms-input-placeholder {
    /* IE 10+ */
    color: #FFF;
}