How to override !important style from external package in angular - css

Problem is I can't override CSS property in my project because of external CSS file has !important on my target property and my style.css is loaded after that external CSS file
example:
package css style:
.ui-slider .ui-slider-handle {
color: red !important;
...
}
my style.css style:
.ui-slider {
color: red !important;
...
}

Change your style like this:
body .ui-slider .ui-slider-handle {
color: red !important;
}
If your style is loaded after the external style, than the external style will be overridden by your style.
By adding the body selector to the rule, your rule will be more precise than the one in the external file, and it will have higher priority even if your style will be loaded before the external style.

If your css is loaded after external css, then your css will overwrite it.
ie.
external.css
.ui-slider .ui-slider-handle {
color: red !important;
...
}
internal.css
.ui-slider .ui-slider-handle {
color: blue !important;
...
}
outcome:
color: blue;

Try to you add one your own class (ex:sb-slider) in above this control,
then use like below
.sb-slider {
.ui-slider .ui-slider-handle {
color: blue !important;
...
}
}
I hope this is help you.

Try this :
.ui-slider[style] {
color: red !important;
...
}

Related

Change color of ion-datetime value

How is it possible to change ion-datetime value color?
Documentation https://ionicframework.com/docs/api/datetime#css-custom-properties show only css variable for the placeholder color.
But how the value color can be changed?
--color: has no effect.
When no CSS variable is defined on the Ionic element, you can simply use normal CSS declarations:
ion-datetime {
color: #f90;
}
This could be done in a single component's CSS file or globally to target all ion-datetime across the entire applicaiton.
Update
To target the placeholder without affecting values:
ion-datetime {
--placeholder-color: #0f9;
}
&:not(.datetime-placeholder) {
color: #f00;
}
I have achieved it like so on Ionic 5+/Angular:
global.scss
ion-picker>.picker-wrapper {
background-color: var(--dark-theme-color) !important;
}
.picker-opt {
color: #7994A2 !important;
}
.picker-opt.picker-opt-selected {
color: var(--ion-color-light) !important;
}
ion-datetime {
color: var(--ion-color-light) !important;
}

How to write custom CSS for placeholder

I want to customize the placeholders which comes inside the modal i.e , those comes under class styled-input.
I tried with the following CSS but it doesn't seems working.
.styled-input::-webkit-input-placeholder {
color: blue !important;
}
.styled-input:-moz-placeholder {
color: blue !important;
}
.styled-input::-moz-placeholder {
color: blue !important;
}

Angular 2 Material change md-radio-button color

I want to change the default color of the md-radio-button to blue. Is there any way to override the current color?
https://material.angular.io/components/radio/overview
I tried (solution i found here):
.my-radio md-radio-button , md-radio-button.md-checked ._md-on{
background-color: DodgerBlue !important;
}
however this isnt working.
You can set the style in the component's CSS file:
/deep/ .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
border-color: DodgerBlue;
}
/deep/ .mat-radio-button.mat-accent .mat-radio-inner-circle {
background-color: DodgerBlue;
}
If you want to apply it for whole application, then put the css in root component's css.

Where to find ZK sclass available items?

I'm using ZK and I want to make use of the ZK sclasses for the items in my .zul files.
I saw that you can use things like :
<style>
div.z-tree {
background: none !important;
background-image: none !important;
border: none !important;
}
div.z-tree-body {
background: none !important;
}
tr.z-treerow-seld, tr.z-treerow-over {
background: #00533f !important;
}
div.z-treecell-cnt {
color: #5555ff;
}
.test-class div.z-treecell-cnt {
color: #ff5555 !important;
}
</style>
Where can I find all those styles, like z-tree-body that I can use and all the attributes I can assign to them or how to search for them?
When I need to override some CSS, I always search the specific CSS classes with the browser developer tools.
Because you want to override the CSS of some nodes but not all, try to use sclass to a specific class of your own.
Example :
<style>
.red {
color:red;
}
<style/>
<label sclass="#load(empty vm.property?''':'red')" />
You don't need to use the zk classes if it's for particularisme cases. For overriding them all, you can beter use the zk classes.

Confused about overriding CSS styles

I understand CSS basics, but I keep running into trouble with conflicting styles. Consider the following styles.
First, the default font color in my style sheets is black. I want that color applied to all picture captions - unless they're contained in divs with a class CoolL or CoolR...
.CoolL .Caption, .CoolR .Caption { color: #900; }
Now all the captions in the Cool series have brown text. But there are situations where I want the captions to have a black background with white text, so I created this rule:
.Black { background: #000; color: #fff; }
Now consider the following HTML. Class Caption by itself should have black text. However, this is inside a div with a class CoolR, so it displays brown text instead. But I added the class Black to the last div, which should change the background to black and the text color to white...
<div class="CoolR Plus Max300">
<div class="Shadow2">
<img src="">
<div class="Caption Black">Text</div>
</div>
</div>
In fact, the background is displaying black, but the text color is still brown.
I get these problems all the time, and the only way I can fix them is to write long, detailed styles, like this...
.Black, .Caption .Black, .CoolR .Caption.Black, .EverythingElseThatCouldBeBlack .Black { background: #000; color: #fff; }
What am I missing? Thanks.
I think you are over complicating things. This will become a maintenance issue as you add more styles. I would define separate classes and keep things simple. It's also important to understand CSS specificity.
.caption {
color: #000;
}
.cool-caption {
color: #900;
}
.caption-with-background {
background-color: #000;
color: #fff;
}
You could try :
.Black { background: #000 !important; color: #fff !important; }
There are a few fixes, but as previously recommended you should mark all of the settings you want to override previous ones with !important. With that, your code would look like this:
.Black {
background: #000;
color: #fff;
}
Also, not sure if you asked this, but you can apply CSS to all components by using the *, like so:
* {
//blahblahblah
}
you are defining the first case with a descendant selector which overrides the second class, which is merely a class. every answer given already will work but are entirely unnecessary. just add this to your style sheet:
.CoolR1 .Black, .Black{ background: #000; color: #fff;}
/** you could also chain your classes for specificity power **/
.Black.Caption{color:#fff}
that should do it. you can read more about selectors here:
http://docs.webplatform.org/wiki/css/selectors
I think that generally a more specific rule overrides a more general one, thus the more specific '.CoolR .Caption' is overriding the more general .Black. You'll probably be able to override this with !important, but a better style might be to reduce the complexity of your rules:
.Cool .caption { color: #900; }
.Cool .caption.black { color: background: #000; color: #fff; }
And put .L and .R in separate classes
.Cool.L { . . . } /* For things specific to CoolL, but not CoolR */
.Cool.R { . . . } /* and vice-versa */

Resources