Customize the color when clicking on a mat-slide-toggle

Whenever I click on the element, a shadow appears in the color that corresponds to the element, which is currently yellow

I would like to change that shadow to be green instead, but I am unsure of how to do so. Here is my code:

HTML

   <mat-checkbox id="tractor{{element.id}}" checked="{{element.tractor}}"></mat-checkbox>

CSS

::ng-deep .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb {
background-color: rgb(50, 170, 118); /*replace with your color*/
}

    ::ng-deep .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {
        background-color: rgb(113, 226, 147);  /*replace with your color*/
    }

Answer №1

If you want to change the color of the shadow, consider applying a custom style to the .mat-ripple-element class.

::ng-deep
.mat-toggle-button.mat-selected .mat-ripple-effect{
    background-color: teal;
}

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

Initiate Bootstrap 4 dropdown menus from the initial menu point

I need the dropdown menus to align with the position of the first dropdown. There are multiple dropdowns on the page. Check out the screenshot for reference. JSFiddel: https://jsfiddle.net/kfh9Lbep/ Any ideas on how to achieve this alignment? <div cl ...

Exclude striped tr elements within a subtable

I have a main table (Maintable) containing information, with each row having a sub-table for additional details that can be collapsed if needed. I am trying to stripe the rows in the Main table but using `tr:nth-child(even)` is not working as it also affec ...

Angular TypeScript test checking file size with Jasmine

Seeking optimal method for testing File size during input type="file" change event. Currently, my test specification appears as follows: it('attach file with too large size', () => { const file: File = { name: 'filename', ...

Encountering issues with executing transactions in an Ionic 2 application when utilizing Sqlite functionality from Ionic Native

I am currently working on a project that involves setting up and querying a local sqlite database. I am utilizing the cordova-sqlite-plugin along with Sqlite from Ionic Native. Here is the code snippet responsible for opening the database and creating tab ...

JavaScript threw an error with message: 'Unexpected identifier' that was not caught

Upon launching Web Developer in Firefox: SyntaxError: missing } after property list note: { was opened at line 7, column 7 ...

What is the best way to place a div within another div?

I am facing a challenge where I need to insert a new div within another div before all its existing contents. The issue is that the outer divs do not have unique IDs, only classes as selectors. Unfortunately, I do not have control over the generation of th ...

How can variables within nested ngFor loops be referenced in Angular 1.5 compared to Angular 10?

This particular piece of code was functional in Angular 1.5. It featured a condition where the <tr> element would only be displayed if the 'showFields' flag for that specific row key was set to true. <table> <ng-container *ngIf=& ...

Position 2 identical classes side by side on the horizontal axis

Currently enrolled in the MIMO HTML course and facing a challenge where I am unable to align both elements with the class="column" attribute horizontally using display: inline-block; I have attempted using float:right and other CSS properties to achieve a ...

Ways to align two buttons side by side in HTML

I'm struggling with the code on my company's website. I can't seem to get the buttons to float properly with the given code. <div class="text-center"><a class="text-center" href="/contact-us"><button class="btn btn-small btn- ...

Find and conceal the object within the list that includes the term "Ice"

The teacher's assignment is to create a radio button filter that hides items with the word "Ice" in them, such as "Ice Cream" and "Iced Tea." Here is the current code I have been working on: <!DOCTYPE html> <html> <head> <me ...

What is the best way to design a scalable row of square elements using Bootstrap 5?

Looking to create a set of 6 Bootstrap 5 cards in square dimensions to function as buttons. Each card should be col-xl-2 wide and exactly square in height. I've started creating the cards with the code below. Can anyone provide guidance on how to ach ...

How can I make sure that another function will only be executed after the completion of a function in

I'm currently working on an app with Angular CLI, and I am trying to retrieve a list after an insertion. Despite trying various methods such as observer, promise, async, setTimeout, etc., I haven't been able to find the right solution yet. I feel ...

Ionic 4: Facing issues with setting complete background image on ion-card

https://i.stack.imgur.com/3lH6h.png I'm currently attempting to set a background image for an Ion-card in order to completely cover the card's area. However, I'm facing an issue where the background image does not cover the entire area and ...

Creating a diagonal rectangle with a flat bottom: A step-by-step guide

Hey there, I've encountered a little issue. I managed to create a diagonal shape on my webpage similar to the one shown in this image: Now, what I'm aiming for is something like this: I'm looking to achieve a shape resembling the one outli ...

Showing off the latest products at the top of the list

Typically, when utilizing ngFor, the most recent item is displayed underneath the initial element. For instance, a list containing: [Apple, Orange, Banana] If we use ngFor to display this list: Apple Orange Banana I am interested in learning a method t ...

Prevent selection of future dates in HTML input using PHP exclusively

I am looking for a way to limit the date input on my form using PHP and HTML. <?php echo '<input type="date" name="doc" value="' . date("d-m-Y") . '" min="11-05-2014" max="' . date("d-m-Y") . '"/>'; ?> While rese ...

"What is the significance of the .default property in scss modules when used with typescript

When dealing with scss modules in a TypeScript environment, my modules are saved within a property named default. Button-styles.scss .button { background-color: black; } index.tsx import * as React from 'react'; import * as styles from ' ...

.comment {Visibility:hidden;} is only functioning on one specific page

What could be the reason behind this function only functioning on one page and not the others? The URL in question is . Specifically, the functionality is only active on the contact page while all other pages still display a comment section. ...

adjustable backdrops

Hi there, I'm trying to create a background image that resizes with the window while maintaining its proportions. I want to achieve this using CSS only. I've been searching for a solution but haven't found anything that works for me. I even ...

Issue with border in a nested table within an HTML table

I am faced with an issue in styling nested tables. My goal is to have borders on both tables, but I specifically need only the bottom border of the inner table without the top, right, and left borders. The default border style can be achieved using the fol ...