I'm using Angular 14.1.0, with normal CSS. I'm wondering how I can style a specific Angular Material component child when it doesn't exist prior to runtime, such as the caret of an input field.
Currently in my style.css file, I have things like this:
app-results .mat-input-element {
caret-color: black !important;
}
However, my app has two fields on the same page. One has a white background, the other has a black background. This means that I'd like two separate cases where one input field has a black caret, and the other has a white caret - so that they are both visible.
The only information I can find online about this is using ::ng-deep which I don't understand - and seems to have been entirely deprecated by now. Any help would be greatly appreciated, thanks!
Related
I am working on a website, https://wordpress-625707-2032312.cloudwaysapps.com/, with the WP Shopify Plugin, and trying to change the default button colors. I have gone into dev tools and found the div class to change the button background. I can clearly see it's labeled as "wps-btn wps-btn-secondary wps-add-to-cart css-7k7g1c-buttonCSS-addToCartCSS-AddButton"
But when I use this class for my css changes, it doesn't work. The change is "wps-btn wps-btn-secondary wps-add-to-cart css-7k7g1c-buttonCSS-addToCartCSS-AddButton {
background-color: #D71614 !important;
}"
Why is this not working?? I can't attach screenshots since I'm too new on here...sorry!
Actually you are pretty lost here.
This is not actually a class:
wps-btn wps-btn-secondary wps-add-to-cart css-7k7g1c-buttonCSS-addToCartCSS-AddButton
There are 4 classes there, separated by spaces. The last one is actually unique for the first button. And in css, when you are styling a class, you should start with a dot, like: .class-name
The code you are looking for is:
.wps-btn.wps-btn-secondary.wps-add-to-cart {
background: red;
}
We concatenate 3 classes here with dots and NO spaces.
You should take a look at CSS Selectors:
https://www.w3schools.com/cssref/css_selectors.asp
Currently material select form field uses an arrow down which I believe it is done via css.
I would like to replace it with a different type of arrow, and I would like advice on what would be the best way to achieve this.
Here's what I am hoping to switch the original one for:
the original one is a solid triangle as seen in https://material.angular.io/components/select/overview
Thank you for any advice!
You have to understand something: The solid triangle for the mat-select, is not an image, its just pure CSS (or SCSS in this case).
Its just like how you create triangles and circles using CSS. Same procedure.
If you want to change the style, color etc, you can do it in the following way:
:host {
::ng-deep
mat-select.mat-select
> div.mat-select-trigger
> div.mat-select-arrow-wrapper
> div.mat-select-arrow {
color: red !important;
}
}
Here i changed the 'color' property. But you can play around with shapes of triangles too.
Here is the stackblitz: https://stackblitz.com/edit/angular-xkkagv?file=src%2Fapp%2Fselect-overview-example.scss
If you want it without ::ng-deep, you can use ViewEncapuslation.None in your component.ts file and play around too, which, in hindsight, may not be a good solution at the moment.
I am trying to style my website at mathbymiles.com and I am trying to color some social media link SVG icons in the footer of the website. I used the following code to change the colors to orange:
svg.fa.d-icon.d-icon-fab-facebook.svg-icon.svg-string, svg.fa.d-icon.d-icon-fab-twitter.svg-icon.svg-string, svg.fa.d-icon.d-icon-fab-patreon.svg-icon.svg-string, svg.fa.d-icon.d-icon-fab-quora.svg-icon.svg-string {
color: #FF6C00;
}
So this gave me this desired result:
HOWEVER, other instances of these svg icons are now orange, too like here, which is undesired:
How can I fix this?
Probably your question does not directly point to a problem. In fact, you need to guess the problem you are experiencing in order to find the problem. People may therefore see it as a question of poor quality.
If we come to the answer to the question,
svg.fa.d-icon.d-icon-fab-facebook.svg-icon.svg-string, svg.fa.d-icon.d-icon-fab-twitter.svg-icon.svg-string, svg.fa.d-icon.d-icon-fab-patreon.svg-icon.svg-string, svg.fa.d-icon.d-icon-fab-quora.svg-icon.svg-string {
color: #FF6C00;
}
The CSS code you wrote above includes features that predominate by nature to include other icons. See Class Selectors.
Let's rewrite this to affect only the icons below,
.social a.social-link svg.svg-icon
{
color: #FF6C00 !important;
}
Thus, when there is a suitable match, we force it to be orange with "! Important". But if there is no match, we leave it to their natural state. Feel free to write if you have any problems.
Note: Delete the one you added and replace it with the new one above.
I am often running into the problem of not knowing what css to change for ionic components. For example I have a button that I am outlining using ionic, my initial guess was to overwrite its outline/border color with something like.
border: 1.2px solid #697954;
But that didnt work so I essentially just had to dig through forum posts until I found that its changed with
--border-color
This seems like an incredibly inefficient method to finding how to overwrite ionic component css variables.
Where can I find exactly what css ionic is using for its components so I can easily overwrite them without digging through forum posts? I checked in the ionic core.css on github, but that didnt give me the info I wanted.
Well know I have border color done correctly, but I need change the onclick background color and the onclick text color. I dont want to dig through the forums again.
As of Ionic 4 component views are encapsulated in a shadow dom and therefore not designed to be easily overwritten with css. Each component has it's own documentation for how you can override common css properties, such as:
https://ionicframework.com/docs/api/button#css-custom-properties
There are a number of guides available for more information about styling shadow doms, such as:
https://www.joshmorony.com/styling-a-shadow-dom-in-ionic-4/
A similar discussion with the example applied to a button can be found here:
Ionic 4 custom styling Shadow DOM
In some situations the Ionic Documentation isn't always up-to-date with the latest CSS variables that are available for a component. A sure-fire way to find out what variables are available is by looking at the master source code on Github for the component's CSS.
For example, if I wanted to see what variables are available for the ion-range component I would look at the range.md.scss file:
:host {
--knob-border-radius: 50%;
--knob-background: var(--bar-background-active);
--knob-box-shadow: none;
--knob-size: 18px;
--bar-height: #{$range-md-bar-height};
--bar-background: #{ion-color(primary, base, 0.26)};
--bar-background-active: #{ion-color(primary, base)};
--bar-border-radius: 0;
--height: #{$range-md-slider-height};
--pin-background: #{ion-color(primary, base)};
--pin-color: #{ion-color(primary, contrast)};
#include padding($range-md-padding-vertical, $range-md-padding-horizontal);
font-size: $range-md-pin-font-size;
}
Here we can see all the variables available for the host component (in this case, ion-range).
Similar to the question referenced below, I am trying to set the background and foreground color of the active tab label using theme colors. I mostly expected referencing the theme colors identifiers in CSS to not work. Is there a proper way to do so?
AngularJS Material Design : Different colors for different tabs in md-tabs
works:
.md-tab.md-active
{
background: green;
}
doesn't work:
.md-tab.md-active
{
background: accent;
}
The md-colors directive works with either value within an html tag, but they don't apply to the specific portions of md-tabs or md-tab that I would like:
<div md-colors="{color: 'accent', background: 'green'}">My Text</div>
What I'm trying to do is avoid hard coding the color that happens to be the accent (or could be primary) in the CSS. I'm thinking there is a way to programmatically determine the colors of accent/primary and then apply the colors. I haven't figured it out yet.
I think the issue is that you are trying to set the color to 'accent' which is not a color. As a variable it works in an Angular directive, but not is vanilla css.