Change background of disabled material fill input - css

Using Angular Material I can change the background of this fill-matInput:
<mat-form-field>
<mat-label>Tax-number</mat-label>
<input type="text" matInput [id]="'taxnumber'" [formControl]="controlContainer.control.controls['taxnumber']">
<mat-error>{{controlContainer.control.controls['taxnumber'].errors | bsErrorMessage}}</mat-error>
</mat-form-field>
I can change the background using the following css:
.mat-form-field-appearance-fill
.mat-form-field-flex {
background: rgba(255, 255, 255, 1);
}
Now I want to change the background of the control when it is disabled. My best guess would be
.mat-form-field-appearance-fill:disabled
.mat-form-field-flex:disabled {
background: rgba(255, 15, 15, 1);
}
But this does not work. So how do I change the background of a disabled angular material fill input instead?
I created a stackblitz for this problem:
https://stackblitz.com/edit/angular-bcqsjo

Checking out your stackblitz link I just opened up chrome dev tools and inspected the disabled field. Here is the css being applied:
.mat-form-field-appearance-fill.mat-form-field-disabled .mat-form-field-flex {
background-color: rgba(0,0,0,.02);
}
So there is an additional class (mat-form-field-disabled) on the parent. Your updated code would be:
.mat-form-field-appearance-fill.mat-form-field-disabled .mat-form-field-flex {
background: rgba(255, 255, 255, 1);
}

Related

QT pushbutton with image how to transparent/opacity

I have a pushbutton and was styled in QSS to assign an image like this
QPushButton[type="buttonImgType"] {
image: url(:images/svg/myIcon.svg);
image-position: center;
min-height: 42px;
min-width: 130px;
}
I want this button to display as if it is faded or like say 50% transparent when it is not checked
and show full image when it is. But I cant find a way how to using the properties in QT for buttons.
Anyone have idea how to?
Following #Nejat answer:
You can set transparency of QLabel or QPushbutton by setting the
stylesheet :
ui->label->setStyleSheet("background-color: rgba(255, 255, 255, 0);");
ui->button->setStyleSheet("background-color: rgba(255, 255, 255, 0);");
You can also add background-color: rgba(255, 255, 255, 0); to the styleSheet property of the widget in the designer.
The fourth parameter is alpha. You can also have semi-transparent
widgets by setting alpha to some value more than zero :
ui->button->setStyleSheet("background-color: rgba(255, 255, 255, 50);");
Possible duplicate of
C++ over Qt : Controlling transparency of Labels and Buttons
Try This Style :
QPushButton
{
background-color: transparent;
border: none;
}
QPushButton:pressed
{
background-color:rgba(239, 41, 41,50);
border:2px solid black;
}
until QPushButton has border it didn't transparent .

How to avoid "-internal-autofill-selected" style to be applied?

I have a login form with 2 fields, username and password. Username field is autocompleted by chrome. When I submit the form (when it is valid), this style is applied mysteriously:
input:-internal-autofill-selected {s ñ
background-color: rgb(232, 240, 254) !important;
background-image: none !important;
color: -internal-light-dark-color(black, white) !important;
}
Is there a way to avoid that? The form is submitted using Ajax, so it is a little ugly if for Username field that style is applied, but for Password field it is not.
I noticed that this happen only if field is filled with an element in the chrome sugggestions list. If field is filled with a value that is not in the list, the style is not applied.
Regards
Jaime
To get rid of the undesired behavior, this trick "just works" (tm):
input:-webkit-autofill,
input:-webkit-autofill:focus {
transition: background-color 600000s 0s, color 600000s 0s;
}
The answer is not intuitive. It's more a trick than anything else but it looks like it's the only one that works:
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px yellow inset;
}
This will style a yellow background to you input. It's basically a very opaque and overwhelming inner shadow. They use the same trick in the link #ravb79 sent.
If you're ok with the default -internal-autofill-selected styling on a light theme and just want it to look nicer in a dark theme then you might just need:
input {
color-scheme: dark;
}
You can add a box-shadow to remove the blue background
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0), inset 0 0 0 100px rgba(255, 255, 255,1);
I tried overwriting the style but for some reason it didn't work at all. Webkit or at least chrome just ignored that style.
When I added !important to the style webkit / chrome just flat-out removed it from the equation entirely. Nowhere to be seen in the element inspector.
Everything I tried got either ignored or removed.
Sooo, I came up with this horrible bullshit. But it works so far.
// Fix autocomplete shit
function fix_autocomplete_shit() {
setTimeout(() => {
if ($(this).is(':-internal-autofill-selected')) {
var clone = $(this).clone(true, true);
$(this).after(clone);
$(this).remove();
}
}, 10);
}
$('.form-control').on('input', fix_autocomplete_shit);
I'm using bootstrap and I want to keep validation icons in form of background-images.
Only god knows why the webkit creators thought they absolutely have to set background-image to none but if they want war they can have it.
You could just add your own CSS so the updated state matches your regular input state. Adding an extra class to your declaration together with the !important attribute should override it.
So:
input.my-input {
background-color: rgb(255, 255, 255) !important;
background-image: none !important;
color: rgb(0, 0, 0) !important;
}
input.my-input:-internal-autofill-selected {
background-color: rgb(255, 255, 255) !important;
background-image: none !important;
color: rgb(0, 0, 0) !important;
}
I also found this btw: https://css-tricks.com/snippets/css/change-autocomplete-styles-webkit-browsers/
I slightly tweaked #kostiantyn-ko's answer to only be applied to invalid inputs.
Sass:
input {
&:is(:invalid, [aria-invalid=true]) {
// your error styles
background-color: var(--color-background-critical-subdued);
border: 1px solid var(--color-border-critical-subdued);
// hack needed to get rid of autofill styles only on invalid forms
&:is(:-webkit-autofill, :-webkit-autofill:focus) {
transition: background-color 600000s 0s, color 600000s 0s;
}
}
}
CSS:
/* your error styles */
input:is(:invalid, [aria-invalid=true]) {
background-color: var(--color-background-critical-subdued);
border: 1px solid var(--color-border-critical-subdued);
}
/* hack needed to get rid of autofill styles only on invalid forms */
input:is(:invalid, [aria-invalid=true]):is(:-webkit-autofill, :-webkit-autofill:focus) {
transition: background-color 600000s 0s, color 600000s 0s;
}

How to change side menu background color in ionic 4?

I want to change the side menu background color, I tried a few things but not working.
ion-menu{
ion-content{
background-color: transparent !important;
}
.inner-scroll {
--background: var(--ion-menu-background);
}
}
Does anyone know how I can change background color in ionic 4?.
Try this
.inner-scroll {
background: green;
}
.inner-scroll .item-native{
background: green;
}
In cases where there are gradients and shades of colors, you can try this. This is particularly useful if you want the entire side-menu to have a gradient, without any borders, separating the toolbar, content and items.
// In variable.scss file you can create your Ionic css variables
:root
{
--custom-menu: radial-gradient(
circle farthest-corner at 10% 20%,
rgba(246, 133, 133, 1) 16.3%,
rgba(172, 131, 241, 1) 90%
);
}
// In the app.component.scss file you would need to reference the variable that you created
ion-menu {
--ion-background-color: var(--custom-menu);
ion-toolbar {
--background: transparent;
}
ion-list {
background: transparent;
}
ion-item {
color: rgb(255, 255, 255);
--background: transparent;
}
ion-content {
--background: transparent;
}
}
// In the appcomponent.html file, ensure that you specify the no-border directive
<ion-header no-border>
<ion-toolbar>
<ion-title>Test</ion-title>
</ion-toolbar>
</ion-header>
This is the output

how to add opacity to scss variable?

I am wondering if it is possible to add the opacity element to a sass variable? I am working on a project where I need to create different shades of a color and use them in custom typography file. My problem is when I create a color variable in rdga and implement it into my work the variable changes the code to a CSS opacity element which is written under a color element then this gets ran through the browser and throws and error. Is there a certain way to implement opacity in a variable so you don't get this problem?
Any help would be great, thanks
here are my variables:
$white-text-dh: rgba(255, 255, 255, 0.5);
$white-text-d: rgba(255, 255, 255, 0.12);
here is the typography ex:
.c-title{
font-size:20px;
color: $white-text-d;
font-family: Roboto-Light;
}
here is the html
<span class="c-title">hello</span>
this is what reads in the developer tools with an error going through the color. the color element can not read opacity
.c-title {
font-size: 20px;
color: #ffffff opacity 0.7%;
font-family: Roboto-Light;
}
I tested this and it works for me:
SCSS
$white: #fff;
$white-text-dh: rgba($white, .5);
.c-title {
color: $white-text-dh;
}
HTML
<h1 class="c-title">Test</h1>

hide outline on phonegap android

I am testing phonegap android to do something, and I want to hide the outline on link and input tag.
outline:0;
is useless.
How can I hide it?
Thanks.
For links and input tag
a, input
{
outline:0;
border:none;
}
Try this:
input:focus, textarea:focus {
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-webkit-user-modify: read-write-plaintext-only;
}

Resources