I see this question has been asked twice before, but both solutions had to do with removing spacing. Without any spacing in between rgba and (, my issue still seems to persist. My CSS code is:
background: rbga(255,255,255,.7);
I've also tried:
background-color: rbga(255,255,255,.7);
In Chrome, both of these register as an Invalid property value.
However, if I use:
background-color: white;
opacity: .7;
The above code does work. Any reason why the rgba code is not working?
Please try with
rgba(255,255,255,.7);
Your Spelling is incorrect
hello you have typo background-color: rgba(255, 255, 255, .1);
and you tried background-color: rBga(255,255,255,.7);
Related
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;
}
I just realized, that in Chrome 69 the behavior for -webkit-background-clip: text; changed. It now has the same bug as Edge. When the content is wrapped in paragraphs, the text is invisible.
What I want to achieve is that I have a gradient in the background and transparent text color, so that the color of the gradient comes through. This works in Firefox and used to work in Chrome, but now, in version 69, it no longer works.
Here is a codepen to try it out: https://codepen.io/obs/pen/eLPeYz
When you delete the p tags, it works as supposed to.
Is this a bug in Chrome? How can I get around this?
Yes, this seems to be a bug in Chrome. Others have reported it also: Chrome 69 when using 'transform', '-webkit-background-clip: text' and 'color:transparent' don't work
Also, good practice is to put -webkit-background-clip: text; on an element that has text in it, not on it's parent.
I learned that the bug does not happen when you have nested inline elements. So adjusting obs codepen to use span tags instead of p tags the clipping works.
background: linear-gradient(#131c27, #663b34);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
This works in chrome. just set your gradient and then use the rest of the code in css.
I came here looking to see if anyone else was experiencing trouble webkit-background-clip: text;. I noticed the code for making text gradients worked on text inside buttons but when I applied the same code to h1 text it did not work. After some experimentation I discovered that adding width before the background linear gradient solved the issue for me.
I know these answers are a couple of years old, but should someone like me looks here again, the following worked for me:
<style>
h1 { text-align:center; font-family: 'Italiana', serif;
font-size: 2em; width:50%; background: linear-gradient(
to right, rgba(206, 189, 167, .55), rgba(247, 241, 226,
1), rgba(206, 189, 167, .55));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text; padding: 1em 0 1em 0; }
</style>
View my gradient text at: https://palmbeachcuisine.com/#BreakfastandBrunch
So I've been wasting a lot of time trying to do something simple. Using a custom css plugin I've been trying to set my body to be transparent to see the image in the background.
What I first tried using was opacity selector, but that set everything in the body as transparent. I'd like to have my images and text not be transparent. I've been googling this for many hours and each answer I see for other people is to use the rgba (number, number, number, opacity). I can see how this would work, but using this does not make the background transparent at all. I'm really at a loss for what to do, I feel like there is just something really simple I am missing.
Please inspect my code to see where I've gone wrong: [jaredbabinec.com][1]
Also here is my css:
body {
opacity: .9;
}
.site-header {
rgba(255, 255, 255, .9);
}
.site-content {
background-color: rgba(210, 210, 210, 0.9)
}
change the background color of the div with id="page"
for example
#page{
background-color: rgba(185, 178, 178, 0.71);
}
change the color as needed. Hope this will fix ur problem
use this
.site-content {background: rgba(210,210,210,0.9)}
`
.site-header {
rgba(255, 255, 255, .9);
}
`
rgba is not a property, it is a value you left out background:
Give the body the background image with background-size set to cover.
You want to create a site-wrapper div that is height and width 100%.
Make the background for that div transparent
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>
I've followed this discussion about styling the text in placeholders but i still run into problems.
Regard the following code. For some reason, the background gradient is effective on both my input field and the submit button but the text color of the placeholder is only black in the former. The last remains gray looking like if it's disabled. Why is it so and what can be done about it?
div.login input[type=text],
div.login input[type=submit]{
box-shadow: inset 1px 0px 0px 1px rgba(40, 40, 255, .6);
background: #989898;
background: -moz-linear-gradient(top, #ffffff 0%, #cc66ee 100%);
background: -webkit-linear-gradient(top, #ffffff 0%,#cc66ee 100%);
}
input::-webkit-input-placeholder{
color: #000000;
}
input:-moz-placeholder{
color: #000000;
}
I tried it out on both Chrome and FF.
Please do not reply that the issue is with me using single/double colon in the different cases (unless you've got a really heavy reason). It's apparently supposed to be that way since one refers to a pseudo class and the other to a pseudo element.
I just realized why it is like that and how to resolve it.
WHY?
Because the text on the button isn't a placeholder, which i mistakingly believed. It's just a normal text.
HOW?
By using the mysterious style of "color".