I'm trying to override innate vuetify style for the disabled state of my buttons but I can't find the right style / classes / terms.
Here is my CSS :
.contained-btn {
color: white !important;
background-color: blue !important;
border-radius: 4px !important;
}
.contained-btn:disabled {
background-color: #DDE5ED !important;
color: black !important;
}
.theme--light.v-btn.v-btn--disabled:not(.v-btn--flat):not(.v-btn--text):not(.v-btn-outlined):not(.contained-btn) {
background-color: unset !important;
border-color: unset !important;
}
.theme--light.v-btn.v-btn--disabled.contained-btn:not(.v-btn--flat):not(.v-btn--text):not(.v-btn-outlined) {
background-color: revert !important;
}
The background-color doesn't work except if I uncheck those 2 styles in my developer tool :
For the color I have to uncheck this too :
How can I traduce this "uncheck" in my CSS please ?
For everybody using Vuetify 3, you can use css variables like this:
html body .v-theme--light {
--v-disabled-opacity: 1;
}
Obviously, if you are using the dark theme you should do this:
html body .v-theme--dark {
--v-disabled-opacity: 1;
}
I'm not sure if this works for vuetify 2
I finally found the solution by adding this style :
.v-btn.v-btn--disabled.contained-btn:not(.v-btn--flat):not(.v-btn--text):not(.v-btn-outlined) {
background-color: #DDE5ED !important;
color: black !important;
}
Instead of :
.theme--light.v-btn.v-btn--disabled.contained-btn:not(.v-btn--flat):not(.v-btn--text):not(.v-btn-outlined) {
background-color: revert !important;
}
i can't change the menu items color when on hover
As you can see, when on hover the color is shown only in the corners, but not on the actual item.
This is my css code:
/*Menubar*/
.p-menubar {
background-color: var(--primary) !important;
}
.p-menu-list {
background-color: var(--primary) !important;
}
.p-menuitem {
background-color: var(--primary) !important;
}
.p-menu-list:hover {
background-color: #000 !important;
}
.p-menuitem:hover {
background-color: #000 !important;
}
.p-menuitem-text, .p-menuitem-icon, .p-submenu-icon {
color: var(--text-primary) !important;
}
If i understood correctly, you need this
.p-menuitem-active a {
background: #000 !important;
}
or this depending on whether you want it for hover or on expand
.p-menuitem-link:hover {
background-color: #000 !important;
}
I am using
<p-steps [model]="items" [(activeIndex)]="activeIndex" [readonly]="false"></p-steps>
in my Angular component. In my component's stylesheet, I am trying to style the p-steps with no luck. When I change the style directly in the browser's developer tools, it works. I even tried to overwrite the style with Angular's
:host ::ng-deep
But it did not work. I want the steps to be aligned vertically, I dont want the border and I want the step numbers to be light grey and the selected step number to be light grey. What I want is the follwing:
:host ::ng-deep .ui-widget, .ui-widget * {
float: none !important;
}
:host ::ng-deep .ui-steps {
border: none !important;
}
:host ::ng-deep .ui-steps .ui-steps-item .ui-state-highlight .ui-steps-number {
background-color: #757575 !important;
}
:host ::ng-deep body .ui-steps .ui-steps-item .ui-menuitem-link .ui-steps-number {
background-color: #bdbdbd !important;
}
I have also set
encapsulation: ViewEncapsulation.None
in my component.
Here's the solution. You were missing a ::ng-deep
::ng-deep .ui-widget, ::ng-deep.ui-widget * {
float: none !important;
color: red;
}
.ui-steps {
color: red;
border: none;
}
.ui-steps .ui-steps-item .ui-state-highlight .ui-steps-number {
background-color: #757575;
}
.ui-steps .ui-steps-item .ui-menuitem-link .ui-steps-number {
background-color: red;
}
https://stackblitz.com/edit/primeng-template-jr2vaa
Avoid encapsulation: ViewEncapsulation.None
Avoid using
!important
Start using SCSS
Don't put any custom code in
your parent scss
My Suggestion never override the CSS of any third party library as it is. If you want to override CSS property of any element first use your own class. Then add CSS properties. With the rule of CSS specificity it will override the CSS properties easily without using !important and any other hack.
What I did to solve this issue I have added my own class customestepper and overridden the CSS properties like below:
<p-steps [model]="items" class="customstepper"></p-steps>
and then in styles.css
.customstepper .ui-state-highlight{
background: #343a40;;
}
.customstepper .ui-steps .ui-steps-item.ui-state-highlight .ui-menuitem-link {
color:#fff;
}
Demo: Click to see the demo
Image
you can add encapsulation: ViewEncapsulation.None and try this in your component css:
.ui-widget, .ui-widget * {
float: none !important;
color: red;
}
.ui-steps {
color: red;
border: none !important;
}
.ui-steps .ui-steps-item .ui-state-highlight .ui-steps-number {
background-color: #757575 !important;
}
.ui-steps .ui-steps-item .ui-menuitem-link .ui-steps-number {
background-color: red !important;
}
or delete the encapsulation: ViewEncapsulation.None and put the above css in your global styles.css file.
first way DEMO.
second way DEMO.
I solved it like this (decided not to use the vertical alignment):
body .ui-steps .ui-steps-item.ui-state-highlight .ui-steps-number {
background-color: #757575 !important;
}
.ui-steps .ui-steps-item .ui-menuitem-link .ui-steps-number {
background-color: #bdbdbd !important;
}
.ui-steps:before {
border: none !important;
}
I also needed to add the
encapsulation: ViewEncapsulation.None
in my component.
Another solution that works without adding encapsulation is this:
:host ::ng-deep .ui-steps .ui-steps-item.ui-state-highlight .ui-steps-number {
background-color: #757575 !important;
}
::ng-deep .ui-steps .ui-steps-item .ui-menuitem-link .ui-steps-number {
background-color: #bdbdbd !important;
}
::ng-deep .ui-steps:before {
border: none !important;
}
Without using
!important
it does not work so far.
I was able to successfully change the background-color (red) of a button and the color of its text (yellow), but for some reason it reverts to having a blue background and a white colored text.
This is my CSS code:
.btn-primary {
background-color: red;
color: #ffff00;
}
.btn-primary:active,
.btn-primary:visited,
.btn-primary:focus,
.btn-primary:link {
background-color: red;
color: #ffff00;
}
.btn-primary:hover {
background-color: yellow;
color: #ffff00;
}
try adding !important at the end of your declarations, like this:
background-color: yellow
becomes
background-color: yellow !important
I am trying to style the button colour with below code, the colours work until I click the button, the button shows the default colours, how do I specify the colours of the button onclick?
.btn-success {
color: #ffffff;
background-color: #161617;
border-color: #494F57;
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.open .dropdown-toggle.btn-success {
color: #ffffff;
background-color: #1F2838;
border-color: #494F57;
}
.btn-success:active,
.btn-success.active,
.open .dropdown-toggle.btn-success {
background-image: none;
}
.btn-success.disabled,
.btn-success[disabled],
fieldset[disabled] .btn-success,
.btn-success.disabled:hover,
.btn-success[disabled]:hover,
fieldset[disabled] .btn-success:hover,
.btn-success.disabled:focus,
.btn-success[disabled]:focus,
fieldset[disabled] .btn-success:focus,
.btn-success.disabled:active,
.btn-success[disabled]:active,
fieldset[disabled] .btn-success:active,
.btn-success.disabled.active,
.btn-success[disabled].active,
fieldset[disabled] .btn-success.active {
background-color: #161617;
border-color: #494F57;
}
.btn-success .badge {
color: #161617;
background-color: #ffffff;
}
The :active selector is what you need for the click.
.btn-sample:active {
// click styles here
}
It looks like you have that above so if you are still seeing a slightly different color it is most likely because of the box-shadow that is also applied to the active button state. Disable that like so:
.btn-sample:active {
box-shadow: none;
}
Edit:
The selector that is overriding your css is actually btn-success:active:focus. So you will need to add the following to your css:
.btn-success:active:focus {
color: #ffffff;
background-color: #161617;
border-color: #494F57;
}
Further to my comment below, you would be better off creating your own class such as btn-custom to which you can apply your desired styles. Combining this with the existing btn class, you can achieve your desired result with much less code as you won't need to override existing selectors.
You have to use the !important declaration to do that correcly.
.btn-success:hover, .btn-success:active, .btn-success:focus {
color: #ffffff !important;
background-color: #1F2838 !important;
border-color: #494F57 !important;
}
I fixed this behaviour with this css code:
.btn-primary {
background-color: #8ed3cc;
border: 0 !important;
padding: 1rem 5rem;
border-radius: 0;
font-family: 'Lato', sans-serif;
font-size: 1.2rem;
box-shadow: none !important;
}
.btn-primary:hover {
background-color: #69aca5 !important;
border: 0 !important;
box-shadow: none !important;
}
.btn-primary:focus {
background-color: #69aca5 !important;
border: 0 !important;
box-shadow: none !important;
}
Some inspiration from the bootstrap source for overriding these various button states where $off-white and $brand-black are defined by us:
.btn-success {
&:hover,
&:focus,
&.focus {
color: $off-white;
background-color: $brand-black;
}
&:active,
&.active,
&.disabled,
&:disabled {
color: $off-white;
background-color: $brand-black;
&:focus,
&.focus {
color: $off-white;
background-color: $brand-black;
}
}
}
That button press animation of the default color is due to the background image. Use this for each named style (btn-default, btn-success, etc):
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
background-image: none;
}
Just add the following code in your CSS
.btn-success.active.focus, .btn-success.active:focus, .btn-success.active:hover, .btn-success:active.focus, .btn-success:active:focus, .btn-success:active:hover, .open>.dropdown-toggle.btn-success.focus, .open>.dropdown-toggle.btn-success:focus, .open>.dropdown-toggle.btn-success:hover
{
color: #fff;
background-color: #161617;
border-color: #494F57;
}
If you are working on a personal project, and not with a team, it is worth noting that you can override pseudo class styles simply by applying "!important" to the same style declarations on the class:
.btn-success {
color: #ffffff !important;
background-color: #161617 !important;
border-color: #494F57 !important;
}
Generally, it's a good idea to stay away from !important because this will override any and all color, background-color and border-color style declarations on the btn-success class (unless you override the style declarations again with !important later in your style sheet although that's ridiculous).
If the goal is the smallest file size possible though and you are using this class everywhere in the same way - meaning no inline styles - then this may be your best option.
Alternatively, but using the same thinking, you may try naming a new custom class something like .btn-success-important, and only apply it after btn-success where you need to use the override.
There is one catch though: If you are combining .btn-success or your .btn-success-important with any other Bootstrap .btn-group, !important will override any pseudo class style declared within. In this case you may be better off with Guy's answer (the custom class without !important style declarations).
if you want remove the box-shadow just add box-shadown:none and make it important or if you want add box-shadows just add color values.
.btn-primary:not(:disabled):not(.disabled):active{
color: #fff;
background-color: #5b5fc6;
border-color: #5b5fc6;
box-shadow: none !important;
}
or
.btn-primary:not(:disabled):not(.disabled):active{
color: #fff;
background-color: #5b5fc6;
border-color: #5b5fc6;
box-shadow: 0 0 0 0.2rem #c9cbfa !important
}
to trigger any class whenever a button is clicked, you need :active selector and to fix the default behavior of the bootstrap button on click, you need to set the background-color to any color you want to along with !important. It will then override the default styling of the bootstrap class.
.btn-outline-primary:active{ background-color: [your color] !important}