First of all I know questions regarding the Chrome yellow input background problem has been asked several times and there are lots of ways provided to override it.
But I am unable to make it work for me, as I am having form with transparent inputs.
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
}
The above code works perfectly for making the color of input white but when I give the following code it gives yellow as background.
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px rgba(0,0,0,.1) inset;
}
Is there any possible way of fixing this. Also autocomplete="off" on form dosenot solve my problem.
Adding a hidden input before the input field without name attribute removes the yellow but when I type a username the input background changes back to yellow.
the auto-completed input in chrome always have a yellow background.
By using -webkit-box-shadow: 0 0 0px 1000px rgba(0,0,0,.1) inset; you are putting a black background with 10% visibility on top of the yellow background, wich will result in a litle bit darker yellow background.
And by using -webkit-box-shadow: 0 0 0px 1000px transparent inset; you are putting a transparent background on top of the yellow background, wich will change absolutely nothing.
You can either accept these results or use a 100% visible color like black, rgb(255, 255, 255), rgba(255, 255, 255, 1) or #000000
I think that the yellow background cannot be removed, you can only put another one on top of it, it's a bug I think, I never found a solution for it.
I might be utterly wrong, but a workaround might be changing the input "name" attribute each time (adding a random string to it) so that the browser won't recognize it as the username field and won't trigger the autocorrection
Then you could simply either use a substr() to cut away the random part or pass the random string as a form field and compose the POST array names with that
Related
Working template of the site: https://codesandbox.io/s/blue-currying-3me1t
my <h1> and <h2> elements in Header.js have the background-color: #000000; property set. When the particles pass through the area that the headers are in, they are completely obscured by this background color.
How do I make the background color of the headers transparent? I want to be able to see the particles passing through the region as to maintain context.
The intended effect looks like the image below although I am trying to maintain the area in between the two headers being blur free.
Why don't you pass the header (assumming You only need the header to be transparent),
opacity: .5;
/* Or, */
background-color: rgba(0, 0, 0, .5);
You might need to add some shadows and so on stuff to give that thing a transparent feel.
So, basically. I have a search type input field. This is a searchbox, when you double click the input box you can see all your previous searched keywords and when you select or hover over a keyword the background changes color from white to yellow. Like shown in the screenshot below.
I would like to disable this highlight color.
I think you could use this few lines in your CSS :
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
}
And to change the text color :
-webkit-text-fill-color: yellow !important;
I think this is google auto-complete, check out the top answer in this post Removing input background colour for Chrome autocomplete?
I want to create a text where the body of each letter is to be completely transparent (or set a certain opacity) but the shape of it is to be just the border.
In this post I saw a way to create a border around text. However, it is created based on the actual state of the text, so if I change its opacity, the border responds to that.
How could I create this border I am looking for?
The best way to do this is to set color of the text to rgba(255,255,255,0), the -webkit-text-stroke-width to 1px and the -webkit-text-stroke-color to #000 or any other color you would like to use
So it will be like this :
h1 {
color:rgba(255,255,255,0);
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #000;
}
Maybe this link will help you, it has more details about RGBA colors
A brief introduction to Opacity and RGBA
Hope this will help you ...
I have a dark/black background image and a white input field. I gave the input field an opacity of 50% and I want the text/value to be solid white(#fff). BUT when I apply the opacity it effects both the background of the input element and the text. How to I only change the background of the input field?
For that you could use background-color: rgba(0, 0, 0, 0.5). The first three numbers are the background color in rgb (red, green, blue) format and the fourth number is the opacity level on a scale from 0 to 1.
From what you say, you only want the background to be affected.
For backgrounds to be (partially) transarent, you have to use a
a) PNG background
or
b) a RGBa background- see https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#rgba()
Like so: background:rgba(0,0,0,0.2);
This is not supported in IE8 and below.
The problem is that you are changing the opacity on the entire element. As such, all child elements strictly inherit the transparent properties.
There are a few things you can do.
You could target only the background and set it to an RGBA value:
background: rgba(255, 255, 255, 0.5);
This wont work in IE8 and before, so you can use a workaround using linear gradient filters:
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ffffff', endColorstr='#80ffffff',GradientType=0 );
You will notice that the first 2 hexadecimal places are #80. This is not a mistake and is not a decimal value. Hexadecimal is base 16, this makes #80 the median point therefore setting your opacity to 50%. It's a little confusing, I know!
You could remove styling from the input field and, instead, add a wrapper around your input fields and style that instead.
You could use a semi-transparent PNG as the background image and set it to repeat.
Why not simply make a half-transparent png and use that as background image instead of setting the input opacity? Or if you don't have to support IE8- you can also use rgba().
I'm building a new website, and I'm looking for a transparent navigation bar so the background is visible.
There is not a Transparent color code, but there is an Opacity styling. Check out the documentation about it over at developer.mozilla.org
You will probably want to set the color of the element and then apply the opacity to it.
.transparent-style{
background-color: #ffffff;
opacity: .4;
}
You can use some online transparancy generatory which will also give you browser specific stylings. e.g. take a look at http://www.css-opacity.pascal-seven.de/
Note though that when you set the transparency of an element, any child element becomes transparent also. So you really need to overlay any other elements.
You may also want to try using an RGBA colour using the Alpha (A) setting to change the opacity. e.g.
.transparent-style{
background-color: rgba(255, 255, 255, .4);
}
Using RGBA over opacity means that your child elements are not transparent.
When you have a 6 digit color code e.g. #ffffff, replace it with #ffffff00. Just add 2 zeros at the end to make the color transparent.
Here is an article describing the new standard in more depth: https://css-tricks.com/8-digit-hex-codes/
All you need is this:
#ffffff00
Here the ffffff is the color and 00 is the transparency
Also, if you want 50% transparent color, then sure you can do...
#ffffff80
Where 80 is the hexadecimal equivalent of 50%.
Since the scale is 0-255 in RGB Colors, the half would be 255/2 = 128, which when converted to hex becomes 80
And since in transparent we want 0 opacity, we write 00
#0000ffff - that is the code that you need for transparent. I just did it and it worked.
You can specify value to background-color using rgba(), as:
.style{
background-color: rgba(100, 100, 100, 0.5);
}
0.5 is the transparency value
0.5 is more like semi-transparent, changing the value from 0.5 to 0 gave me true transparency.
According to MDN there is a transparent keyword, which is short for rgba(0,0,0,0).
{background-color: transparent;}
If you are looking for android apps, you can use
#00000000
Yeah I think the best way to transparent the background colour (make opacity only for the background) is using
.style{
background-color: rgba(100, 100, 100, 0.5);
}
Above statement 0.5 is the opacity value.
It only apply the opacity changes to the background colour (not all elements')
The "opacity" attribute in the CSS will transparent all the elements in the block.
Here, instead of making navigation bar transparent, remove any color attributes from the navigation bar to make the background visible.
Strangely, I came across this thinking that I needed a transparent color, but all I needed is to remove the color attributes.
.some-class{
background-color: #fafafa;
}
to
.some-class{
}