:host ::ng-deep is not properly cascading styles to material checkbox

Struggling with changing the background color of a checkbox in a material multiselect.

I've attempted both

.mat-pseudo-checkbox-checked { background-color: #a9a9a9 !important; }

and

:host ::ng-deep .mat-pseudo-checkbox-checked { background-color: #a9a9a9 !important; }

in the component.css without success. I'm hesitant to settle for just

::ng-deep .mat-pseudo-checkbox-checked { background-color: #a9a9a9 !important; }

as it would impact other components. Disabling ViewEncapsulation and modifying main styles.css are not options. Any help is greatly appreciated.

EDIT: Also tried assigning a class to the <mat-select> itself and using 

mat-select.class .mat-pseudo-checkbox-checked { background-color: #a9a9a9 !important: }
in styles.css, but that didn't work either.

javascriptcssangularangular-material

Answer №1

To set the custom checkbox color, you must add the class to the panelClass attribute as shown below:

Check out the Material Select API Reference for more details.

CSS

.custom-checkbox-color .mat-pseudo-checkbox-checked {
  background-color: #a9a9a9 !important;
}

HTML

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

View the live demo on stackblitz.

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

Having trouble adding a test card to the Google Pay testing environment and calculating the order total

How can I display the order total in GooglePay payment sheet? I could not find any documentation on this. Is it possible to do so? Even though I am using the TEST environment, I am unable to add any test card as mentioned in the URL provided below. Additio ...

javascriptangularreactjsgoogle-pay

Positioning of CSS elements: Distributing and arranging 4 divs evenly within a single parent div

Is there a more efficient method? div { border: 2px solid black; } #main { width: 107px; height: 107px; padding: 0; text-align: center; font-size: 10px; } #tl, #tr, #bl, #br { position: relative; width: 45px; height: 45px; } #tl { t ...

htmlcssuser-interfacepositioning

iOS 13 causing input field to be covered by keyboard on Ionic v4

I've been grappling with this persistent bug for quite some time now, but unfortunately, I haven't been able to make any headway in resolving it. The issue arises when I click on an input field, causing the keyboard to cover the input until I st ...

iosangularionic-frameworkionic4ios13

Learning the Basics of CSS: Understanding the Difference Between Float and Liquid Layout

What sets apart a float layout from a liquid layout? ...

cssterminology

How to Determine the Requirement Status of Input Variables in an Angular 2 Directive?

Is it possible to specify an input variable in a directive as required or optionally as non-required? In the example below, we have set a default value of false. However, if I fail to declare it in the parent component template, ng2 AoT throws an error: ...

angularionic2

Guide to sending a text from HTML to an Angular 8 Component through the use of the (click) function

After successfully implementing this code: <a [routerLink]="['/menuItemOne']"> <span [innerHTML]="(mystrings$ | async)?.menuItemOne | htmlToText"></span> </a> I now face the challenge of updating t ...

angularangular8page-title

Is there a text form in Angular that allows only numerical input?

Here's an input form in Angular that I'm working on: <input ng-model="sc.zip" class="form-control" maxlength="5" type="text" /> I want to keep the form as a simple empty textbox without limiting it to only numbers. However, I do want to r ...

javascriptangularjsformstextinput

Using conditional statements with a series of deferred actions in jQuery

In the scenario where I have chained the $.Deferred as shown below: $.each(data, function(k, v) { promise.then(function() { return $.post(...); }).then(function(data) { if(data)... // here is the conditions return $.post(.. ...

javascriptjqueryajaxchainingdeferred

Using PHP foreach loop to create bootstrap 4 cards

I am attempting to showcase all of my shop items on my webpage using Bootstrap 4 cards. I want them to be displayed in a grid format, three wide and however many deep (I may consider adding pagination later). Currently, I have a PHP foreach loop that succ ...

phpcssforeachdisplay

What is the best way to use Javascript in order to automatically open a designated tab within SharePoint 2013?

Currently, I am in the process of developing a website project which incorporates Bootstrap tabs utilizing jQuery. While these tabs are functioning excellently on various pages, I am faced with the challenge of linking specific icons to corresponding tabs ...

javascriptjqueryhtmltwitter-bootstrapsharepoint

Getting response headers in Angular by utilizing an HTTP interceptor

Seeking guidance on how to interpret response headers when utilizing httpinteceptor in Angular. I have exposed all the tokens in my Node.js application, but am facing challenges in comprehending all the keys passed in the response headers. intercept(req: ...

angularangular-httpclient

How do I retrieve my compiled template from a directive in Angular?

Having a directive structured as follows: return { scope:{ divid: '@' }, template: '<div id="{{divid}}"></div>' } Here is an example instance: <direct divid="some-id"></direct> The goal is to execut ...

javascriptangularjsdomangularjs-scope

Whenever I create a div class and apply CSS styling to it, the styles are not being applied as expected

Greetings, I am fairly new to the world of programming. My question revolves around the use of the .logo class in my HTML file. Despite attempting to assign specific dimensions to the gif in my CSS snippet, it doesn't seem to be working as intended. ...

htmlcss

Tips on inserting JS code into React component

I seem to be struggling with integrating my JS code into a React component. I attempted it, but unfortunately made a mess of things. Can anyone provide guidance on how to properly accomplish this? mycomponent.js import React from "react"; import Navbar ...

javascriptreactjssocketscomponents

Aligning container divs at the center in various screen resolutions

I recently constructed a portfolio website using Bootstrap and Isotope JS. In my layout, I have a container div which works perfectly when viewed on a desktop browser - displaying 3 divs in one line. However, the issue arises when the resolution changes an ...

javascripthtmlcsstwitter-bootstrapjquery-isotope

How can AJAX be used for form validation prior to submission?

Currently, I am facing an issue with validation on the client side when making an ajax cross-domain request to my PHP server page. I have a standard HTML form that posts input fields such as name, last name, and message. Here is an example of my form on th ...

javascriptphpjqueryajaxforms

Begin the Wordpress AJAX Login

Is there a way to trigger the code below when a user is logged out from another location due to user inactivity, similar to how wp-admin displays an AJAX login overlay if a user is logged out? I have not come across any documentation or tutorials on achiev ...

javascriptphpjqueryajaxwordpress

Utilizing Subdirectories in a Command Manager

My goal is to organize my commands into sub folders, but for some reason my bot is not recognizing the commands inside those folders. Strangely, no error message is being displayed. const fs = require('node:fs'); const Discord = require('dis ...

javascriptnode.jsdiscorddiscord.js

Toggle jQuery to hide a div and update its CSS styling

There is an anchor with the class of "hide-btn1" that I want to trigger a series of actions when clicked: The rcol-content should hide and the text should change from Hide to Show The #container width needs to increase to 2038px The table.status-table wi ...

javascriptjqueryhtmlcss

issue encountered when trying to deploy a React application on GitHub

I successfully created a todolist on localhost. Now, I am facing issues while deploying it on GitHub. When I run '$ npm run deploy' in the command prompt, I encounter errors. To troubleshoot, I have added 'homepage', 'predeploy&ap ...

javascriptreactjsgithubnpmcommand-prompt