How to change mat-select placeholder color?
up vote
1
down vote
favorite
I am trying to change the color of a mat-select placeholder. It works fine if this is 'background-color' but not if this is 'color'. Here is my css code:
/deep/ .mat-select-placeholder {
color: red;
}
.mat-select-placeholder {
color: red;
}
Here is the hmtl code:
<mat-form-field class="formfield-size-medium">
<mat-select [formControlName]="formControl.nationality" name="Nationality"
placeholder="Nationalities"
class="class-mat-select" multiple>
<mat-option *ngFor="let nationality of
nationalityList.nationalities" [value]="nationality.value">
{{getNationalityValue(nationality.value)}}
</mat-option>
</mat-select>
</mat-form-field>
I tried also with /deep/ but it still does not work. The text is always in black. So why it works with background-color and not with color?
My other issue is that when there is a mat-option selected in the list, the placeholder (looking smaller) is always in black even when color is set to red and background-color is also set to red. Thanks for your help.
css angular angular-material-5
asked Nov 22 at 17:02
corleone88
262
add a comment |
up vote
1
down vote
favorite
I am trying to change the color of a mat-select placeholder. It works fine if this is 'background-color' but not if this is 'color'. Here is my css code:
/deep/ .mat-select-placeholder {
color: red;
}
.mat-select-placeholder {
color: red;
}
Here is the hmtl code:
<mat-form-field class="formfield-size-medium">
<mat-select [formControlName]="formControl.nationality" name="Nationality"
placeholder="Nationalities"
class="class-mat-select" multiple>
<mat-option *ngFor="let nationality of
nationalityList.nationalities" [value]="nationality.value">
{{getNationalityValue(nationality.value)}}
</mat-option>
</mat-select>
</mat-form-field>
I tried also with /deep/ but it still does not work. The text is always in black. So why it works with background-color and not with color?
My other issue is that when there is a mat-option selected in the list, the placeholder (looking smaller) is always in black even when color is set to red and background-color is also set to red. Thanks for your help.
css angular angular-material-5
asked Nov 22 at 17:02
corleone88
262
add a comment |
up vote
1
down vote
favorite
up vote
1
down vote
favorite
I am trying to change the color of a mat-select placeholder. It works fine if this is 'background-color' but not if this is 'color'. Here is my css code:
/deep/ .mat-select-placeholder {
color: red;
}
.mat-select-placeholder {
color: red;
}
Here is the hmtl code:
<mat-form-field class="formfield-size-medium">
<mat-select [formControlName]="formControl.nationality" name="Nationality"
placeholder="Nationalities"
class="class-mat-select" multiple>
<mat-option *ngFor="let nationality of
nationalityList.nationalities" [value]="nationality.value">
{{getNationalityValue(nationality.value)}}
</mat-option>
</mat-select>
</mat-form-field>
I tried also with /deep/ but it still does not work. The text is always in black. So why it works with background-color and not with color?
My other issue is that when there is a mat-option selected in the list, the placeholder (looking smaller) is always in black even when color is set to red and background-color is also set to red. Thanks for your help.
css angular angular-material-5
asked Nov 22 at 17:02
corleone88
262
I am trying to change the color of a mat-select placeholder. It works fine if this is 'background-color' but not if this is 'color'. Here is my css code:
/deep/ .mat-select-placeholder {
color: red;
}
.mat-select-placeholder {
color: red;
}
Here is the hmtl code:
<mat-form-field class="formfield-size-medium">
<mat-select [formControlName]="formControl.nationality" name="Nationality"
placeholder="Nationalities"
class="class-mat-select" multiple>
<mat-option *ngFor="let nationality of
nationalityList.nationalities" [value]="nationality.value">
{{getNationalityValue(nationality.value)}}
</mat-option>
</mat-select>
</mat-form-field>
I tried also with /deep/ but it still does not work. The text is always in black. So why it works with background-color and not with color?
My other issue is that when there is a mat-option selected in the list, the placeholder (looking smaller) is always in black even when color is set to red and background-color is also set to red. Thanks for your help.
css angular angular-material-5
css angular angular-material-5
asked Nov 22 at 17:02
corleone88
262
asked Nov 22 at 17:02
corleone88
262
edited Nov 23 at 10:42
asked Nov 22 at 17:02
corleone88
262
asked Nov 22 at 17:02
corleone88
262
asked Nov 22 at 17:02
corleone88
262
262
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
I have manage to change the color of placeholder like this
style.css
mat-form-field span.mat-form-field-label-wrapper label {
color:orange !important;
}
mat-form-field.mat-focused span.mat-form-field-label-wrapper label {
color:green !important;
}
stackblitz demo
answered Nov 23 at 10:46
malbarmawi
5,01331131
Thanks. It works well with matInput. With mat-select it works if focused, but not if not focused.
– corleone88
Nov 23 at 13:57
can you check the demo @corleone88
– malbarmawi
Nov 23 at 14:22
Your example works very well, but I think that it does not work for me maybe because I work with Angular 5. Unfortunately, because of complicated project management, I cannot upgrade to Angular 6 or 7. So maybe there is a bug with Angular-Material 5.
– corleone88
Nov 23 at 15:24
check this stackblitz.com/edit/…
– malbarmawi
Nov 23 at 15:31
Hi, thanks again @malbarmawi for your test app in Angular 5. I downloaded the project on my PC, installed the dependencies but I cannot get the same thing as with stackblitz.com. No colour and the labels are under the input and the list element. It is like it does not care about the css.
– corleone88
Dec 4 at 8:42
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53435524%2fhow-to-change-mat-select-placeholder-color%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
I have manage to change the color of placeholder like this
style.css
mat-form-field span.mat-form-field-label-wrapper label {
color:orange !important;
}
mat-form-field.mat-focused span.mat-form-field-label-wrapper label {
color:green !important;
}
stackblitz demo
answered Nov 23 at 10:46
malbarmawi
5,01331131
Thanks. It works well with matInput. With mat-select it works if focused, but not if not focused.
– corleone88
Nov 23 at 13:57
can you check the demo @corleone88
– malbarmawi
Nov 23 at 14:22
Your example works very well, but I think that it does not work for me maybe because I work with Angular 5. Unfortunately, because of complicated project management, I cannot upgrade to Angular 6 or 7. So maybe there is a bug with Angular-Material 5.
– corleone88
Nov 23 at 15:24
check this stackblitz.com/edit/…
– malbarmawi
Nov 23 at 15:31
Hi, thanks again @malbarmawi for your test app in Angular 5. I downloaded the project on my PC, installed the dependencies but I cannot get the same thing as with stackblitz.com. No colour and the labels are under the input and the list element. It is like it does not care about the css.
– corleone88
Dec 4 at 8:42
add a comment |
up vote
0
down vote
I have manage to change the color of placeholder like this
style.css
mat-form-field span.mat-form-field-label-wrapper label {
color:orange !important;
}
mat-form-field.mat-focused span.mat-form-field-label-wrapper label {
color:green !important;
}
stackblitz demo
answered Nov 23 at 10:46
malbarmawi
5,01331131
Thanks. It works well with matInput. With mat-select it works if focused, but not if not focused.
– corleone88
Nov 23 at 13:57
can you check the demo @corleone88
– malbarmawi
Nov 23 at 14:22
Your example works very well, but I think that it does not work for me maybe because I work with Angular 5. Unfortunately, because of complicated project management, I cannot upgrade to Angular 6 or 7. So maybe there is a bug with Angular-Material 5.
– corleone88
Nov 23 at 15:24
check this stackblitz.com/edit/…
– malbarmawi
Nov 23 at 15:31
Hi, thanks again @malbarmawi for your test app in Angular 5. I downloaded the project on my PC, installed the dependencies but I cannot get the same thing as with stackblitz.com. No colour and the labels are under the input and the list element. It is like it does not care about the css.
– corleone88
Dec 4 at 8:42
add a comment |
up vote
0
down vote
up vote
0
down vote
I have manage to change the color of placeholder like this
style.css
mat-form-field span.mat-form-field-label-wrapper label {
color:orange !important;
}
mat-form-field.mat-focused span.mat-form-field-label-wrapper label {
color:green !important;
}
stackblitz demo
answered Nov 23 at 10:46
malbarmawi
5,01331131
I have manage to change the color of placeholder like this
style.css
mat-form-field span.mat-form-field-label-wrapper label {
color:orange !important;
}
mat-form-field.mat-focused span.mat-form-field-label-wrapper label {
color:green !important;
}
stackblitz demo
answered Nov 23 at 10:46
malbarmawi
5,01331131
edited Dec 4 at 8:53
answered Nov 23 at 10:46
malbarmawi
5,01331131
answered Nov 23 at 10:46
malbarmawi
5,01331131
answered Nov 23 at 10:46
malbarmawi
5,01331131
5,01331131
Thanks. It works well with matInput. With mat-select it works if focused, but not if not focused.
– corleone88
Nov 23 at 13:57
can you check the demo @corleone88
– malbarmawi
Nov 23 at 14:22
Your example works very well, but I think that it does not work for me maybe because I work with Angular 5. Unfortunately, because of complicated project management, I cannot upgrade to Angular 6 or 7. So maybe there is a bug with Angular-Material 5.
– corleone88
Nov 23 at 15:24
check this stackblitz.com/edit/…
– malbarmawi
Nov 23 at 15:31
Hi, thanks again @malbarmawi for your test app in Angular 5. I downloaded the project on my PC, installed the dependencies but I cannot get the same thing as with stackblitz.com. No colour and the labels are under the input and the list element. It is like it does not care about the css.
– corleone88
Dec 4 at 8:42
add a comment |
Thanks. It works well with matInput. With mat-select it works if focused, but not if not focused.
– corleone88
Nov 23 at 13:57
can you check the demo @corleone88
– malbarmawi
Nov 23 at 14:22
Your example works very well, but I think that it does not work for me maybe because I work with Angular 5. Unfortunately, because of complicated project management, I cannot upgrade to Angular 6 or 7. So maybe there is a bug with Angular-Material 5.
– corleone88
Nov 23 at 15:24
check this stackblitz.com/edit/…
– malbarmawi
Nov 23 at 15:31
Hi, thanks again @malbarmawi for your test app in Angular 5. I downloaded the project on my PC, installed the dependencies but I cannot get the same thing as with stackblitz.com. No colour and the labels are under the input and the list element. It is like it does not care about the css.
– corleone88
Dec 4 at 8:42
Thanks. It works well with matInput. With mat-select it works if focused, but not if not focused.
– corleone88
Nov 23 at 13:57
Thanks. It works well with matInput. With mat-select it works if focused, but not if not focused.
– corleone88
Nov 23 at 13:57
can you check the demo @corleone88
– malbarmawi
Nov 23 at 14:22
can you check the demo @corleone88
– malbarmawi
Nov 23 at 14:22
Your example works very well, but I think that it does not work for me maybe because I work with Angular 5. Unfortunately, because of complicated project management, I cannot upgrade to Angular 6 or 7. So maybe there is a bug with Angular-Material 5.
– corleone88
Nov 23 at 15:24
Your example works very well, but I think that it does not work for me maybe because I work with Angular 5. Unfortunately, because of complicated project management, I cannot upgrade to Angular 6 or 7. So maybe there is a bug with Angular-Material 5.
– corleone88
Nov 23 at 15:24
check this stackblitz.com/edit/…
– malbarmawi
Nov 23 at 15:31
check this stackblitz.com/edit/…
– malbarmawi
Nov 23 at 15:31
Hi, thanks again @malbarmawi for your test app in Angular 5. I downloaded the project on my PC, installed the dependencies but I cannot get the same thing as with stackblitz.com. No colour and the labels are under the input and the list element. It is like it does not care about the css.
– corleone88
Dec 4 at 8:42
Hi, thanks again @malbarmawi for your test app in Angular 5. I downloaded the project on my PC, installed the dependencies but I cannot get the same thing as with stackblitz.com. No colour and the labels are under the input and the list element. It is like it does not care about the css.
– corleone88
Dec 4 at 8:42
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53435524%2fhow-to-change-mat-select-placeholder-color%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
