How can the color of unselected mat-steps be customized in Angular?

In my CSS code, I have specified the styling for the selected mat-step as follows:

::ng-deep .mat-step-header .mat-step-icon-selected {
    background-color: #a94442; 
 }

While this code works well, I encountered a need to update only certain blue icons:

https://i.sstatic.net/Ip565.png

I attempted the following modification:

::ng-deep .mat-step-header .mat-step-icon {
    background-color: #a94442; 
 }

However, this change affected steps 4, 5, and 6 in addition to steps 1 and 2, which was not desired.

Do you have any suggestions on how to address this issue? Thank you!

cssangular-materialmat-stepper

Answer №1

Avoid using 'ng-deep' as it is outdated. It's recommended to update your styles in the global css file instead. To address your issue, modify the background-color property like this in your 'styles.css' file.

.mat-step-header .mat-step-icon-state-edit {
    background-color: #a94442;
}

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

Box-sizing:border-box causing CSS padding problem in Firefox

Something strange is happening in Firefox, it seems like the debug console is not telling the truth or there's something I'm not seeing. Here's the CSS for the body tag: html, body { width: 100%; } body { padding: 5% 10% 0 10%; ...

cssfirefoxpaddingborder-box

Dynamic sliding box jumps instead of simply fading in/out

My app features both a navigation bar and a sub-navigation bar. Within the sub-navigation bar, users can click on a button that triggers the appearance of another sub-bar while hiding the original one. The new sub-bar should smoothly slide out from behind ...

javascripthtmlcssangularjsangularjs-animation

Navigating React Router: Updating the page on back button press

Looking for a solution to a persistent issue. Despite various attempts and exhaustive research, the problem remains unresolved. Here's the situation: Within my React-Router-Dom setup, there is a parent component featuring a logo that remains fixed an ...

javascripthtmlcssreactjsreact-router

I'm attempting to create a text toggle button for displaying more or less content

I am currently working on implementing a show more/show less button feature. However, the current version is not very effective as I only used slicing to hide content when the state is false and display it all when true. Now, my goal is to only show the ...

javascriptcssreactjs

Transferring checkbox data to Bootstrap modals and dynamically summoning specific div modals using their unique identifiers

I have been trying to populate the checkbox values into corresponding modal divs based on button clicks, but I am facing difficulties in achieving it. Desired outcome: The buttons should trigger the display of selected checkbox values in their respective ...

javascriptjqueryhtmlcssbootstrap-modal

Ways to ensure "overflow: hidden" functions correctly across all web browsers

Issue: I am in the process of designing a webpage layout using divs and css instead of relying on an HTML table structure. It is essential for me to ensure that this design functions smoothly across all major browsers. The challenge I'm facing invol ...

cssbrowsercross-browserhtml

Issue with Datepicker functionality within the <th> element is causing it to malfunction

Currently, I am attempting to utilize the Bootstrap datepicker, but I am facing an issue when trying to implement it within a table, specifically inside a th element. Below is the structure of my table: <table id="table" class="table table-bord ...

htmlcsstwitter-bootstrap

Enhancing Form Spacing with Bootstrap

I have been working on a form design, but I am now facing alignment issues. The problem is more noticeable on larger screens compared to smaller ones. The main issues I am encountering include extra spacing in the social links section even though there ar ...

csstwitter-bootstrapbootstrap-4

Position a single div on the left-hand side and arrange two divs on the right using display:flex

Is there a way to achieve this layout without adding another div, using only parents and 3 child elements? I had tried using height: max-content, but it didn't work as expected. .container { display: flex; flex-wrap: wrap; } .item { flex-bas ...

htmlcssflexbox

Linking an element's class to the focus of another element in Angular

In my Angular application, I have multiple rows of elements that are wrapped with the myelement directive (which is a wrapper for the input tag). To highlight or focus on one of these elements at a time, I apply the .selected class in the styles. Everythi ...

javascripthtmlcssangularjs

Tips for Showing Certain Slides When the Page Loads

When using jQuery filter effects to organize div slides on a page, I encountered an issue where all the divs containing different slides are displayed on page load instead of just the default chosen ['active'] div. The filter effect itself is fun ...

javascriptjquerycsshtml

Replacing a predefined label in Volusion (for language translations)

I am currently working on a project using the Volusion platform, which unfortunately does not provide full interface editing capabilities. As a result, I am attempting to edit certain hardcoded labels in the HTML to display them in Spanish. After trying v ...

htmlcssvolusion

What is the best way to horizontally center an image with a transparent background using CSS?

A search button triggers a processing gif image to appear in the center with a transparent background. The content of this function is described below. Thank you for all responses. .img-loader{ text-align: center; width: 50px; display: block; ma ...

htmlcss

Click on the link that surrounds an inline-block span in Internet Explorer

In Chrome and Firefox, the following code works fine and makes the container clickable. However, in Internet Explorer, only the inner div changes the cursor to indicate that it's clickable, not the span. I could use cursor:pointer to fix this issue, ...

internet-explorerhtmlcss

CSS - How to specify a class within an id using syntax

How can I target a specific tag within an ID using the class name in selector syntax? For example, how can I make the inner "li" turn red in the code snippet below? <html> <head> <style type="text/css"> #navigation li ...

csscss-selectors

Expand the initial expansion panel within an Angular Material accordion by opening the first attachment

In Angular Material expansion panels, the expanded input can be used to automatically open a specific panel when the page loads. However, in my dynamic accordion where all panels are optional, I want the first panel to be opened by default. I could manual ...

javascripthtmlangularangular-materialaccordion

Chrome (on both Linux and Windows) is not compatible with CSS

Here is the code snippet I am currently working with: <style type="text/css"> div { margin: 100px auto; width: 0px; height: 0px; border-right: 30px solid transparent; border-top: 30px solid red; border-left: 30px solid red; border-bottom: 3 ...

windowslinuxfirefoxcss

Is the Foundation Orbit image slider experiencing technical difficulties?

Hey there, I've been experimenting with Foundations Orbit media container to create an autoplay image slider using HTML and CSS. While I'm more comfortable with HTML/CSS than JavaScript, I have struggled to find a simple and cost-effective soluti ...

htmlcsszurb-foundation

Ensuring DIVs are completely contained within their parent DIV using Fullscreen CSS and a height of

I found a nearly-perfect design using the code below: https://i.sstatic.net/56i2E.png This code provides the layout mentioned: <!DOCTYPE html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="http://maxcdn. ...

htmlcss

The intl-tel-input dropdown feature is malfunctioning on mobile browsers

Currently, I have integrated the intl-tel-input library into my project for selecting international telephone numbers from a dropdown menu. https://i.sstatic.net/vPfpd.png While accessing the application on a web browser, the country flags display correc ...

cssangularjssassmobile-websiteintl-tel-input