Our application has the capability for users to print the form they submit. However, I noticed that disabled fields are not dark enough when printed.
I managed to make most fields print black, but I'm struggling to get the radio button text and drop-down field value to print in a darker shade. Currently, only the radio button circle and drop-down label are showing up as black.
Is there an easier way to achieve this? How can I style those two elements with CSS?
EDIT: The current solution uses a theme. When inspecting the computed CSS in Chrome, I noticed that the CSS rules I want to apply are overridden by other styles. I need help prioritizing the @media print section of my CSS. Here is a screenshot of the Chrome computed CSS
@media print {
input {
color: black !important;
}
::ng-deep .mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
background-color: black !important;
}
::ng-deep .mat-radio-button.mat-accent .mat-radio-inner-circle {
background-color: black !important; /*inner circle color change*/
}
::ng-deep .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
border-color:black !important; /*outer ring color change*/
}
textarea {
color: black !important;
}
label {
color: black !important;
}
mat-label {
color: black !important;
}
span {
color: black !important;
}
div {
color: black !important;
}
}