button color change

PHPMaker General Discussion (PHPMaker)
1

hi, I can’t change the colors of all the buttons, in practice I insert a user css with the general classes of the buttons I don’t know where I’m wrong, this is the css code that I insert in the user style.ew-swal2-actions .btn-primary {
color: #FFFFFF;
background-color: #efd200;
border-color: #efd200;
}
.ew-swal2-actions .btn-primary:hover {
color: #FFFFFF;
background-color: #ecc510;
border-color: #ecc510;
}
.btn-check:focus + .ew-swal2-actions .btn-primary, .ew-swal2-actions .btn-primary:focus {
color: #FFFFFF;
background-color: #ecc510;
border-color: #ecc510;
box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
}
.btn-check:checked + .ew-swal2-actions .btn-primary, .btn-check:active + .ew-swal2-actions .btn-primary, .ew-swal2-actions .btn-primary:active, .ew-swal2-actions .btn-primary.active, .show > .ew-swal2-actions .btn-primary.dropdown-toggle {
color: #FFFFFF;
background-color: #efd200;
border-color: #efd200;
}
.btn-check:checked + .ew-swal2-actions .btn-primary:focus, .btn-check:active + .ew-swal2-actions .btn-primary:focus, .ew-swal2-actions .btn-primary:active:focus, .ew-swal2-actions .btn-primary.active:focus, .show > .ew-swal2-actions .btn-primary.dropdown-toggle:focus {
box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
}
.ew-swal2-actions .btn-primary:disabled, .ew-swal2-actions .btn-primary.disabled {
color: #FFFFFF;
background-color: #efd200;
border-color: #efd200;
}

2

Sometimes you may been need to add !important to override CSS styles, you may check and test CSS in your browser first, see View and change CSS.

3

even entering !important does not change anything, on my browser instead I can change it.ew-swal2-actions .btn-primary {
color: #FFFFFF !important;
background-color: #efd200 !important;
border-color: #efd200 !important;
}
.ew-swal2-actions .btn-primary:hover {
color: #FFFFFF !important;
background-color: #ecc510 !important;
border-color: #ecc510 !important;
}
.btn-check:focus + .ew-swal2-actions .btn-primary, .ew-swal2-actions .btn-primary:focus {
color: #FFFFFF !important;
background-color: #ecc510 !important;
border-color: #ecc510 !important;
box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
}
.btn-check:checked + .ew-swal2-actions .btn-primary, .btn-check:active + .ew-swal2-actions .btn-primary, .ew-swal2-actions .btn-primary:active, .ew-swal2-actions .btn-primary.active, .show > .ew-swal2-actions .btn-primary.dropdown-toggle {
color: #FFFFFF !important;
background-color: #efd200 !important;
border-color: #efd200 !important;
}
.btn-check:checked + .ew-swal2-actions .btn-primary:focus, .btn-check:active + .ew-swal2-actions .btn-primary:focus, .ew-swal2-actions .btn-primary:active:focus, .ew-swal2-actions .btn-primary.active:focus, .show > .ew-swal2-actions .btn-primary.dropdown-toggle:focus {
box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
}
.ew-swal2-actions .btn-primary:disabled, .ew-swal2-actions .btn-primary.disabled {
color: #FFFFFF !important;
background-color: #efd200 !important;
border-color: #efd200 !important;
}

4

otto wrote:

on my browser instead I can change it

The setting in the browser override everything in the stylesheet, you need to find out which CSS style finally controls the color element and then override it.Read CSS Specificity, you need to use a selector which is “most relevant to an element” to override it.