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;
}
Related
I want to rewrite some vuetify rules and I want to change background of button to some other color. I can change this with SASS variables builded in vuetify by default but I am curious how to write this selector is SCSS using &
.v-btn {
text-transform: initial;
&.v-btn--disabled.v-btn--has-bg {
background-color: rgba(0,0,0,.6) !important;
color: var(--v-text-light-base) !important;
}
}
.v-btn is repeated 3 times and is there any way to write something like this?
.v-btn {
text-transform: initial;
&.&--disabled.&--has-bg {
background-color: rgba(0,0,0,.6) !important;
color: var(--v-text-light-base) !important;
}
}
& works with whitespaces &--disabled &--has-bg between classes but I need to connect multiple classes into one html element. Is there any way to build this using & ?
You could assign & to a variable so you can re-use this variable in the class name. This is what you get:
.v-btn {
$self: &;
text-transform: initial;
#{$self}.#{$self}--disabled.#{$self}--has-bg {
background-color: rgba(0,0,0,.6) !important;
color: var(--v-text-light-base) !important;
}
}
I want to change the border-color of mat-checkbox on hover .
Below code is not working
::ng-deep .mat-checkbox:hover .mat-checkbox-frame:hover {
border-color: red !important;
}
My Stackblitz . Please help me out .
Set(When you style globally like in style.scss)
.mat-checkbox:hover {
.mat-checkbox-frame {
border-color: #ff2222 !important;//what ever color you want
}
}
If in component-style.scss(like header component, footer etc) then use /deep/ like
/deep/ .mat-checkbox:hover {
/deep/ .mat-checkbox-frame {
border-color: #ff2222 !important;//what ever color you want
}
}
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;
...
}
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;
}
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.