Here's the Stackblitz.
I'm trying to apply the CSS color: blue to the div with class mat-button-toggle-label-content, but its not getting applied.
A similar CSS is getting successfully applied to a parent element called mat-button-toggle-group.
Just apply color to mat-button-toggle and keep it inside mat-button-toggle-group
Working stackblitz
mat-button-toggle-group {
background-color: orange;
mat-button-toggle {
color: blue;
}
}
You can apply the style to .mat-button-toggle-label-content but you need to break Encapsulation.
Component styles are encapsulated. You can't access component's styles(classes, ids) from outside of the component. You need to pierce into that component and inject the styles like below
Note: /deep/ is deprecated and no more recommended. So you can go with above approach. And for more details check Component Styles
mat-button-toggle-group {
background-color: orange;
/deep/ .mat-button-toggle-label-content {
color: blue;
}
}
There are many reason for that !
Your CSS may not be inserted properly into code
The order of material design CSS take over the order of CSS
My solution is that you may need to put !important after color: blue;
it is : color: blue !important;
Just move it to styles.scss and it will work Stackblitz.
How can I remove shadow, change font and style AngularJS Material md-autocomplete tag?
I tried using
md-autocomplete style="border:none"
But it is not working.
::ng-deep .mat-autocomplete-panel{
border: none;
}
I am using a bootstrap 3.3.7 button, and want the button to stay the same color when a mouse focuses, hovers, or clicks on it.
<button class="btn btn-default delete-btn">Delete</button>
Here is where I modify the background-color for my CSS selectors:
.delete-btn:hover, .delete-btn:focus, .delete-btn:active {
background-color: white;
}
This works just fine for a focus or hover event.
However, when the mouse clicks on the button, it changes to it's default grey color. Any ideas what I am missing here? Scratching my head...
The Bootstrap stylesheet has this set of selectors:
.btn-default.active.focus, .btn-default.active:focus, .btn-default.active:hover, .btn-default:active.focus, .btn-default:active:focus, .btn-default:active:hover, .open>.dropdown-toggle.btn-default.focus, .open>.dropdown-toggle.btn-default:focus, .open>.dropdown-toggle.btn-default:hover
.btn-default:active:focus and .btn-default:active:hover are more specific than selectors with only one pseudo-class.
You need to make your selector equally specific:
.delete-btn:hover, .delete-btn:focus,
.delete-btn:active:hover, .delete-btn:active:focus, {
background-color: white;
}
Try the selector .btn.btn-default.delete-btn instread of only .delete-btn and use important.
.btn.btn-default.delete-btn:hover, .btn.btn-default.delete-btn:focus, .btn.btn-default.delete-btn:active {
background-color: white !important;
}
Else, Inspect element on your browser to find the grey color and replace the whole css rule with white color.
Else, check if there is something wrong going on in your javascript and replace your color rule with click event.
Try add important at the end of code like this:background-color: white!important; .
use !important in your styles to replace default styles of bootstrap
Add !important after your css attributes which replace bootstrap default css with yours and give priority to your css For avoiding box shadow use box-shadow. Add This Css:---
.delete-btn:hover, .delete-btn:focus, .delete-btn:active {
background-color: white !important;
box-shadow: none !important;
}
Cannot understand why display:none do not work with css in flex.
Have a css rule:
.hideLabel .ToolbarButtonLabel {
display:none;
color: red;
}
the text for my element
new Label()
became red! But "display:none" do not work! Meantime official documentation (http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/text/StyleSheet.html) says that CSS property CSS property supported values are inline, block, and none.
Is it possible to hide element via css?
I have a twitter widget which is loaded into the footer of my page. The problem is that it uses !important properties all over the place. And because my stylesheets are all loaded into the head, the widget's style sheets automatically override any of mine.
Do I really have to put a couple of separate styles in the footer of my document, below the widget, to get force this. Or is there a more semantic method?
I would go through and see if there is a way to make your CSS more specific than the selectors used in twitter. The rules of specificity will ensure that your !important styles override the twitter !important styles.
Otherwise, as a last resort and if !important is only used on classes in the Twitter CSS then you could assign an id to anything that is overridden to ensure that your selectors are more specific.
/* your style */
#anti_twitter a.link {
color: blue !important;
}
/* twitter style */
a.link {
color: red !important;
}
So using the code above, the links would come out blue.
JSFiddle: http://jsfiddle.net/9T9uk/
<div id="myWrapper">
<div id="theDefaultId">
....
</div>
</div>
and you can use #myWrapper #theDefaultId { anything: value !important; }
theDefaultId is the id which the twitter widget uses and #myWrapper is an id defined by us.
This should work.