hide outline on phonegap android - css

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;
}

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;
}

Change background of disabled material fill input

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);
}

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>

Gray in navbar, can't find CSS to remove

I am working on a new theme for a wordpress site, http://hanahanpolice.com/test/ when I hover over the items the background is gray on some. This only happens when I am on the main page (/test) any other page I do not see the gray. I can not find where this color is coming from. Can anyone help?
Look for this class:
.front-page .menu .current_page_item a {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
filter: none;
}
And remove:
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
In your style.css at line 1308 remove background from this class:
.front-page .menu .current_page_item a{
}
And btw, you can always use for problems like this FireBug for Firefox or with IE developer tools - just press F12.

Resources