Tips for changing the color of a mat checkbox in mat select dropdowns

Is there a way to change the color of mat checkboxes within mat select options as shown below?

<mat-form-field appearance="fill" style="width:49%">
    <mat-label>Select Group</mat-label>
        <mat-select [(ngModel)]="groupNames" name="group" multiple>
            <mat-option *ngFor="let group of GroupList" [value]="groupName">
                {{groupName}}
            </mat-option>
        </mat-select>
</mat-form-field>

I investigated the elements and styles in the browser and found a certain class

.mat-pseudo-checkbox-full.mat-pseudo-checkbox-checked, .mat-pseudo-checkbox-full.mat-pseudo-checkbox-indeterminate {
    background-color: var(--mat-full-pseudo-checkbox-selected-icon-color);
    border-color: rgba(0, 0, 0, 0);
}

This class was influencing the background color of the checkbox (which I want to customize), but even after attempting to override it in the CSS file of my Angular project, the changes are not being applied.

htmlcssangularmaterial-uiangular-material

Answer №1

If you’re working with an older version of angular that uses different HTML, simply update the CSS styles as shown below. The same principles apply as outlined in the latter part of this response!

.mat-pseudo-checkbox-full.mat-pseudo-checkbox-checked {
    background-color: red !important;
    border-color: yellow !important;
}

To override the styles within a component, you can utilize ::ng-deep (although not recommended) at the beginning of the class.

::ng-deep . mat-pseudo-checkbox-full.mat-pseudo-checkbox-checked {
    background-color: red !important;
    border-color: yellow !important;
}

Check out Stackblitz Demo for more details.

While using ::ng-deep is discouraged, achieving similar results by utilizing a class is possible.

Start off by specifying panelClass to assign a custom class to the dropdown menu.

<mat-form-field>
  <mat-label>Toppings</mat-label>
  <mat-select
    [formControl]="toppings"
    multiple
    [panelClass]="'custom-checkbox'"
  >
    @for (topping of toppingList; track topping) {
    <mat-option [value]="topping">{{topping}}</mat-option>
    }
  </mat-select>
</mat-form-field>

Then, in the global styles, add the specified class.

.custom-checkbox .mat-pseudo-checkbox-full.mat-pseudo-checkbox-checked {
  background-color: red !important;
  border-color: yellow !important;
}

Explore the Stackblitz Demo for practical implementation.

Answer №2

If you're working with Angular Material 3, make sure to include this snippet in your styles.scss file.

<html>
    --mat-full-pseudo-checkbox-selected-icon-color: <your chosen color>;
</html>

Wishing you success on your project!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to receive messages from background.js of a Chrome Extension within an Angular web application?

I've developed a Chrome Extension that sends messages to all tabs (through background.js) using the following code: chrome.tabs.query({}).then((tabs)=> { if (tabs) { tabs.forEach(tab => { chrome.tabs.sendM ...

angulargoogle-chrome-extension

Scalable and movable images contained within a div

Is there a way to enable resizing and dragging for each image? Below is a snippet of code that allows users to select which image they would like to display. They have the option to choose multiple images if they prefer. I am looking to implement functio ...

javascriptjqueryhtmlcssjquery-ui

Distance between two lines within a table cell is larger than expected after inserting an image - XHTML/CSS

I have a table created in XTMl, and within one of the cells I have two lines of text: Firstname Surname I want to add an image to the right of these lines. However, when I try to insert the image using <img>, there ends up being a gap between the t ...

htmlcssxhtml

Material-UI: The Mystery of Missing CSS Properties

Struggling to apply a CSS class to an element from Material-UI: bw:hover { -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */ filter: grayscale(100%); } Tried using makeStyles: import { makeStyles } from '@material-ui/core/styles' ...

javascriptcssreactjsmaterial-ui

Avoid the issue of a fixed position navigation bar overlapping with a sticky footer

I need help with making a navigation bar stick to the bottom of the viewport without overlapping the fixed-height sticky footer. Here is the basic markup for reference: <div id="wrap"> <div id="main"></div> </div> <div id="fo ...

jquerycss

Utilizing HTML Entities in jQuery

Is there a way to update the text of a submit button to display "Loading..." instead of "…" when clicked? Currently, I am encountering an issue where clicking the button still shows "…" instead of three dots. Below is the code snippet in qu ...

javascriptjqueryhtmlhtml-entities

Dealing with menu overflow in React using Material UI

Is there a way to ensure that the main content moves correctly in this scenario? Perhaps I need to dynamically calculate the margin-left or find a better solution altogether? Initially, everything seems fine: https://i.stack.imgur.com/S7WBd.png However, ...

reactjsmaterial-ui

Execute a batch file to initiate the npm start command

I'm currently working on an Angular application and I'm looking to streamline the startup process. Instead of manually running "npm start" in the console, I want to create a batch file that will automatically run "npm install" for me. Here is the ...

angularbatch-filenpm

Adding an overlay to a material UI table row: Step by step guide

My code is rendering a row in the following format: `<TableRow key={row.name} > <TableCell>{row.empId}</TableCell> <TableCell>{row.userId}</TableCell> <TableCell>{row.name}</TableCell> <TableCell>{r ...

javascriptcssreactjshtml-tablematerial-ui

The link only seems to function properly after being refreshed

I'm currently creating a mobile site using JQuery Mobile. I have multiple pages within my foobar.html and navigating like this: <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" ...

htmljquery-mobile

Transferring HTML variables to an Angular Component

I am currently trying to transfer the information inputted into a text-box field on my webpage to variables within the component file. These variables will then be utilized in the service file, which includes a function connected to the POST request I exec ...

javascriptdatabaseangulartypescriptflask-sqlalchemy

Select three random items from a string array list along with their corresponding indexes using TypeScript in Angular

Consider this example: I am working with a string array const groceries = [ 'milk', 'coriander', 'cucumber', 'eggplant', 'carrot', 'brinjal', 'on ...

javascriptangulartypescriptarraylist

Guide on setting up and duplicating a template in Vue.js

Allow the user to create multiple person entries by clicking a button with the method "useIt()". A template has been created for this purpose. When the button is clicked, the template should be duplicated and added to the container div. This functionality ...

javascripthtmlcssvue.js

utilizing ajax for laravel image uploads

I'm facing an issue with my code. Whenever I click on the update button, the image does not get uploaded to the backend. Although the console displays a success message, the image value returned is null. Can someone please help me troubleshoot this pr ...

javascripthtmlajaxlaravel

implementing jquery for dynamic pop up placement

When I click the English button, a pop-up appears, but I can only see the full contents of the pop-up after scrolling down. Is there any way to view the entire pop-up without scrolling? Below is the code that I am using: http://jsfiddle.net/6QXGG/130/ Or ...

jqueryhtmlcss

What is preventing the background image from being visible to me?

I'm having trouble displaying an image in a section of my website. Below is the CSS code for that specific section: #start{ height: 100vh; display:block; text-align: center; } .start-img{ background-image: url("assets/img/bg.png"); displa ...

htmlcss

How can I dynamically change the prefix in an angular router?

In my Angular app, I have two main routes: dashboard and login: www.example.com/dashboard www.example.com/auth/login These routes are defined as follows: const routes = [ { path: 'dashboard', component: DashboardComponent }, { path: 'auth ...

angular

In Bootstrap 3, rows are aligned on the same line

My issue is that two rows are coming on the same line in Bootstrap 3. Here is the code for a chat screen with two people: Code [<div class="row single-row mt-10" style="float: left !important;> <div class="col-2" styl ...

angularbootstrap-4

Tips for properly indenting checkbox and radio button elements in HTML code

Check out my live code demo here This is a simple html code where I am attempting to indent radio buttons and checkboxes, but it's proving to be difficult. <tr> <td> <table> <tr& ...

htmlcss

Emphasizing a full row within a table is a way to draw attention

I have a piece of HTML/CSS code that successfully underlines the text in a single table cell when hovering over it. However, I want to extend this effect to underline all text in a row of cells, rather than just one cell. It's not necessary for the en ...

htmlcss