Angular Material - Change color of mat-list-option on selected
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
How can I change the color of selected option of mat-list-option?
Right now I have something like this:
Current list
I want to change the color of whole option or card 'on select' to green. Something like this: 
My code is like this:
<mat-selection-list #list>
<mat-list-option *ngFor="let yuvak of yuvaks">
{yuvak.name}
{yuvak.phonenumber}
</mat-list-option>
</mat-selection-list>
angular angular-material angular2-template angular-material2 angular2-material edited Nov 23 '18 at 7:49
Steffi Keran Rani J
1,01221031
asked Nov 22 '18 at 23:09
Tanmay ParmarTanmay Parmar
79111
add a comment |
How can I change the color of selected option of mat-list-option?
Right now I have something like this:
Current list
I want to change the color of whole option or card 'on select' to green. Something like this:
My code is like this:
<mat-selection-list #list>
<mat-list-option *ngFor="let yuvak of yuvaks">
{yuvak.name}
{yuvak.phonenumber}
</mat-list-option>
</mat-selection-list>
edited Nov 23 '18 at 7:49
Steffi Keran Rani J
1,01221031
asked Nov 22 '18 at 23:09
Tanmay ParmarTanmay Parmar
79111
add a comment |
How can I change the color of selected option of mat-list-option?
Right now I have something like this:
Current list
I want to change the color of whole option or card 'on select' to green. Something like this:
My code is like this:
<mat-selection-list #list>
<mat-list-option *ngFor="let yuvak of yuvaks">
{yuvak.name}
{yuvak.phonenumber}
</mat-list-option>
</mat-selection-list>
edited Nov 23 '18 at 7:49
Steffi Keran Rani J
1,01221031
asked Nov 22 '18 at 23:09
Tanmay ParmarTanmay Parmar
79111
How can I change the color of selected option of mat-list-option?
Right now I have something like this:
Current list
I want to change the color of whole option or card 'on select' to green. Something like this:
My code is like this:
<mat-selection-list #list>
<mat-list-option *ngFor="let yuvak of yuvaks">
{yuvak.name}
{yuvak.phonenumber}
</mat-list-option>
</mat-selection-list>
edited Nov 23 '18 at 7:49
Steffi Keran Rani J
1,01221031
asked Nov 22 '18 at 23:09
Tanmay ParmarTanmay Parmar
79111
edited Nov 23 '18 at 7:49
Steffi Keran Rani J
1,01221031
asked Nov 22 '18 at 23:09
Tanmay ParmarTanmay Parmar
79111
edited Nov 23 '18 at 7:49
Steffi Keran Rani J
1,01221031
edited Nov 23 '18 at 7:49
Steffi Keran Rani J
1,01221031
edited Nov 23 '18 at 7:49
Steffi Keran Rani J
1,01221031
1,01221031
asked Nov 22 '18 at 23:09
Tanmay ParmarTanmay Parmar
79111
asked Nov 22 '18 at 23:09
Tanmay ParmarTanmay Parmar
79111
asked Nov 22 '18 at 23:09
Tanmay ParmarTanmay Parmar
79111
79111
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
You can use aria-selected="true" attribute from mat-list-option tag to target the selected option,
and provide corresponding css properties for the same.
mat-list-option[aria-selected="true"] {
background: rgba(0, 139, 139, 0.7);
}
Stackblitz Working Demo
answered Nov 23 '18 at 6:46
Abhishek KumarAbhishek Kumar
1,473417
I haven't implemented but from the demo i think this will work. However, Where can i find the documentation for the attribute likes aria-selected?.
– Tanmay Parmar
Nov 23 '18 at 17:51
please search the net, because i looked for the dom changes whenever i checked the mat-list-option and found that this attribute was triggered, so i went ahead with the attribute to style mat-list-option tag.
– Abhishek Kumar
Nov 23 '18 at 17:54
@TanmayParmar please upvote the answer as well, its helpful for users looking for answers.
– Abhishek Kumar
Nov 24 '18 at 7:23
add a comment |
Drop Down:
The mat-list-option has mat-option.mat-active which triggered when option is active and mat-option.mat-selected when an option is selected. Add the following to your CSS to modify the active or selected styles, depends on your need.
.mat-option.mat-active {
background: blue !important;
}
.mat-option.mat-selected {
background: red !important;
}
Working Demo
Selection List:
The selection list has aria-selected attribute and by default it is false. It changes to true if you select the item. All you need is to set CSS as below:
.mat-list-option[aria-selected="true"] {
background: rgba(200, 210, 90, 0.7);
}
Working Demo
answered Nov 22 '18 at 23:56
Maihan NijatMaihan Nijat
2,99822550
i am using selection list. this is dropdown.
– Tanmay Parmar
Nov 23 '18 at 4:07
@TanmayParmar Edit my answer for selection list.
– Maihan Nijat
Nov 23 '18 at 13:44
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',
autoActivateHeartbeat: false,
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
});
}
});
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%2f53438937%2fangular-material-change-color-of-mat-list-option-on-selected%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
You can use aria-selected="true" attribute from mat-list-option tag to target the selected option,
and provide corresponding css properties for the same.
mat-list-option[aria-selected="true"] {
background: rgba(0, 139, 139, 0.7);
}
Stackblitz Working Demo
answered Nov 23 '18 at 6:46
Abhishek KumarAbhishek Kumar
1,473417
I haven't implemented but from the demo i think this will work. However, Where can i find the documentation for the attribute likes aria-selected?.
– Tanmay Parmar
Nov 23 '18 at 17:51
please search the net, because i looked for the dom changes whenever i checked the mat-list-option and found that this attribute was triggered, so i went ahead with the attribute to style mat-list-option tag.
– Abhishek Kumar
Nov 23 '18 at 17:54
@TanmayParmar please upvote the answer as well, its helpful for users looking for answers.
– Abhishek Kumar
Nov 24 '18 at 7:23
add a comment |
You can use aria-selected="true" attribute from mat-list-option tag to target the selected option,
and provide corresponding css properties for the same.
mat-list-option[aria-selected="true"] {
background: rgba(0, 139, 139, 0.7);
}
Stackblitz Working Demo
answered Nov 23 '18 at 6:46
Abhishek KumarAbhishek Kumar
1,473417
I haven't implemented but from the demo i think this will work. However, Where can i find the documentation for the attribute likes aria-selected?.
– Tanmay Parmar
Nov 23 '18 at 17:51
please search the net, because i looked for the dom changes whenever i checked the mat-list-option and found that this attribute was triggered, so i went ahead with the attribute to style mat-list-option tag.
– Abhishek Kumar
Nov 23 '18 at 17:54
@TanmayParmar please upvote the answer as well, its helpful for users looking for answers.
– Abhishek Kumar
Nov 24 '18 at 7:23
add a comment |
You can use aria-selected="true" attribute from mat-list-option tag to target the selected option,
and provide corresponding css properties for the same.
mat-list-option[aria-selected="true"] {
background: rgba(0, 139, 139, 0.7);
}
Stackblitz Working Demo
answered Nov 23 '18 at 6:46
Abhishek KumarAbhishek Kumar
1,473417
You can use aria-selected="true" attribute from mat-list-option tag to target the selected option,
and provide corresponding css properties for the same.
mat-list-option[aria-selected="true"] {
background: rgba(0, 139, 139, 0.7);
}
Stackblitz Working Demo
answered Nov 23 '18 at 6:46
Abhishek KumarAbhishek Kumar
1,473417
answered Nov 23 '18 at 6:46
Abhishek KumarAbhishek Kumar
1,473417
answered Nov 23 '18 at 6:46
Abhishek KumarAbhishek Kumar
1,473417
answered Nov 23 '18 at 6:46
Abhishek KumarAbhishek Kumar
1,473417
1,473417
I haven't implemented but from the demo i think this will work. However, Where can i find the documentation for the attribute likes aria-selected?.
– Tanmay Parmar
Nov 23 '18 at 17:51
please search the net, because i looked for the dom changes whenever i checked the mat-list-option and found that this attribute was triggered, so i went ahead with the attribute to style mat-list-option tag.
– Abhishek Kumar
Nov 23 '18 at 17:54
@TanmayParmar please upvote the answer as well, its helpful for users looking for answers.
– Abhishek Kumar
Nov 24 '18 at 7:23
add a comment |
I haven't implemented but from the demo i think this will work. However, Where can i find the documentation for the attribute likes aria-selected?.
– Tanmay Parmar
Nov 23 '18 at 17:51
please search the net, because i looked for the dom changes whenever i checked the mat-list-option and found that this attribute was triggered, so i went ahead with the attribute to style mat-list-option tag.
– Abhishek Kumar
Nov 23 '18 at 17:54
@TanmayParmar please upvote the answer as well, its helpful for users looking for answers.
– Abhishek Kumar
Nov 24 '18 at 7:23
I haven't implemented but from the demo i think this will work. However, Where can i find the documentation for the attribute likes aria-selected?.
– Tanmay Parmar
Nov 23 '18 at 17:51
I haven't implemented but from the demo i think this will work. However, Where can i find the documentation for the attribute likes aria-selected?.
– Tanmay Parmar
Nov 23 '18 at 17:51
please search the net, because i looked for the dom changes whenever i checked the mat-list-option and found that this attribute was triggered, so i went ahead with the attribute to style mat-list-option tag.
– Abhishek Kumar
Nov 23 '18 at 17:54
please search the net, because i looked for the dom changes whenever i checked the mat-list-option and found that this attribute was triggered, so i went ahead with the attribute to style mat-list-option tag.
– Abhishek Kumar
Nov 23 '18 at 17:54
@TanmayParmar please upvote the answer as well, its helpful for users looking for answers.
– Abhishek Kumar
Nov 24 '18 at 7:23
@TanmayParmar please upvote the answer as well, its helpful for users looking for answers.
– Abhishek Kumar
Nov 24 '18 at 7:23
add a comment |
Drop Down:
The mat-list-option has mat-option.mat-active which triggered when option is active and mat-option.mat-selected when an option is selected. Add the following to your CSS to modify the active or selected styles, depends on your need.
.mat-option.mat-active {
background: blue !important;
}
.mat-option.mat-selected {
background: red !important;
}
Working Demo
Selection List:
The selection list has aria-selected attribute and by default it is false. It changes to true if you select the item. All you need is to set CSS as below:
.mat-list-option[aria-selected="true"] {
background: rgba(200, 210, 90, 0.7);
}
Working Demo
answered Nov 22 '18 at 23:56
Maihan NijatMaihan Nijat
2,99822550
i am using selection list. this is dropdown.
– Tanmay Parmar
Nov 23 '18 at 4:07
@TanmayParmar Edit my answer for selection list.
– Maihan Nijat
Nov 23 '18 at 13:44
add a comment |
Drop Down:
The mat-list-option has mat-option.mat-active which triggered when option is active and mat-option.mat-selected when an option is selected. Add the following to your CSS to modify the active or selected styles, depends on your need.
.mat-option.mat-active {
background: blue !important;
}
.mat-option.mat-selected {
background: red !important;
}
Working Demo
Selection List:
The selection list has aria-selected attribute and by default it is false. It changes to true if you select the item. All you need is to set CSS as below:
.mat-list-option[aria-selected="true"] {
background: rgba(200, 210, 90, 0.7);
}
Working Demo
answered Nov 22 '18 at 23:56
Maihan NijatMaihan Nijat
2,99822550
i am using selection list. this is dropdown.
– Tanmay Parmar
Nov 23 '18 at 4:07
@TanmayParmar Edit my answer for selection list.
– Maihan Nijat
Nov 23 '18 at 13:44
add a comment |
Drop Down:
The mat-list-option has mat-option.mat-active which triggered when option is active and mat-option.mat-selected when an option is selected. Add the following to your CSS to modify the active or selected styles, depends on your need.
.mat-option.mat-active {
background: blue !important;
}
.mat-option.mat-selected {
background: red !important;
}
Working Demo
Selection List:
The selection list has aria-selected attribute and by default it is false. It changes to true if you select the item. All you need is to set CSS as below:
.mat-list-option[aria-selected="true"] {
background: rgba(200, 210, 90, 0.7);
}
Working Demo
answered Nov 22 '18 at 23:56
Maihan NijatMaihan Nijat
2,99822550
Drop Down:
The mat-list-option has mat-option.mat-active which triggered when option is active and mat-option.mat-selected when an option is selected. Add the following to your CSS to modify the active or selected styles, depends on your need.
.mat-option.mat-active {
background: blue !important;
}
.mat-option.mat-selected {
background: red !important;
}
Working Demo
Selection List:
The selection list has aria-selected attribute and by default it is false. It changes to true if you select the item. All you need is to set CSS as below:
.mat-list-option[aria-selected="true"] {
background: rgba(200, 210, 90, 0.7);
}
Working Demo
answered Nov 22 '18 at 23:56
Maihan NijatMaihan Nijat
2,99822550
edited Nov 23 '18 at 13:44
answered Nov 22 '18 at 23:56
Maihan NijatMaihan Nijat
2,99822550
answered Nov 22 '18 at 23:56
Maihan NijatMaihan Nijat
2,99822550
answered Nov 22 '18 at 23:56
Maihan NijatMaihan Nijat
2,99822550
2,99822550
i am using selection list. this is dropdown.
– Tanmay Parmar
Nov 23 '18 at 4:07
@TanmayParmar Edit my answer for selection list.
– Maihan Nijat
Nov 23 '18 at 13:44
add a comment |
i am using selection list. this is dropdown.
– Tanmay Parmar
Nov 23 '18 at 4:07
@TanmayParmar Edit my answer for selection list.
– Maihan Nijat
Nov 23 '18 at 13:44
i am using selection list. this is dropdown.
– Tanmay Parmar
Nov 23 '18 at 4:07
i am using selection list. this is dropdown.
– Tanmay Parmar
Nov 23 '18 at 4:07
@TanmayParmar Edit my answer for selection list.
– Maihan Nijat
Nov 23 '18 at 13:44
@TanmayParmar Edit my answer for selection list.
– Maihan Nijat
Nov 23 '18 at 13:44
add a comment |
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.
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%2f53438937%2fangular-material-change-color-of-mat-list-option-on-selected%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
