background-color property with #rrggbb value and bgcolor attribute on td tag, not working on edge for a certain website. What could be the problem?
Try converting your hex (#rrggbb) to RGB. For example:
#8bd8f9 -> rgb(139, 216, 249)
background-color: rgb(139, 216, 249);
You can convert with this website.
Related
I did some research and found you can change the caret-color of a textarea/input to any color you'd like, but is it possible to change it into 2 different colors?
I tried using the CSS linear-gradient function, but that doesn't seem to work:
textarea {
caret-color: linear-gradient(rgb(0, 255, 0), rgb(0, 0, 0));
}
<textarea></textarea>
whereas solid colors work
textarea {
caret-color: red;
}
<textarea></textarea>
According to MDN, only possible values for vanilla CSS-based caret-color are colors represented as RGB, RGBA, HSL, HSLA or HWB values or name colors, e.g. black. Gradients are not allowed by specifications.
I have angular7 application and i have wrote my own class, for my button. the code of the button and the class "btn-baya" is like the following code .
<a [routerLink]='["/eval-detail",evaluation.id]' class=" btn-baya">En savoir plus</a>
.btn-baya {
background-color: rgba(243, 116, 33) !important;
color: #ffffff !important;
cursor: pointer;
}
this code works on all browsers but not ie10 and edge !! any solutions please
The rgba color expression needs 4 values. From it's name — "red", "green", "blue", "alpha". You only have three.
Either specify alpha:
rgba(243, 116, 33, 1)
Or use rgb():
rgb(243, 116, 33)
I'm trying to have a navbar and a body with the same color, using RGBA. Unfortunately, when I use the exact same color on the nav and the body, using css variables to make sure it's right, I get a different result in the two elementss.
Minimal example down below. I'd like the background to foo to be the same as the background to bar, and don't understand why it isn't.
There's additional additional complexity that makes it suboptimal for me to take the obvious solution, namely to let the nav element just inherit from the body. See below the snippet for explanation.
:root {
--main-bg-color: rgba(172, 196, 165, 0.75);
}
body {
color: #333;
background-color: var(--main-bg-color);
}
.navbar-default {
background-color: var(--main-bg-color);
border: none;
}
<html>
<body>
<nav class="navbar-default">foo</nav>
bar
</body>
</html>
Additional relevant information: I'm overriding some Bootstrap classes with the nav, and I would prefer not to just build and host my own local version of bootstrap to get this right. The upshot is that I can't just drop the background-color on the nav and let it inherit from the body. If I drop my own css it gets the color from miserable bootstrap defaults and ends up white. I guess I can go and get a local bootstrap if I have to, but there must be a better way.
All you have to do is make .navbar-default transparent.
:root {
--main-bg-color: rgba(172, 196, 165, 0.75);
}
body {
color: #333;
background-color: var(--main-bg-color);
}
.navbar-default {
background-color: transparent;
border: none;
}
<html>
<body>
<nav class="navbar-default">foo</nav>
bar
</body>
</html>
As mentioned above, the transparency setting at 75% (0.75) looks to be the issue as essentially 25% of the background behind your body will bleed through. If this is not the case you may want to check that:
1) you don't have any "style" attributes in your HTML that would be overwriting your CSS
or
2) you don't have any CSS below this that is inherited by the nav or body.
the 0.75 at the last said color is the transparency, I tried removing it on jsfiddle and now it works... same color
:root {
--main-bg-color: rgba(172, 196, 165);
}
Here it is, I removed the 0.75 as it is the transparency of the color.
While one element is over the other, the transparency of 0.75 makes the difference.
The transparency is defined by the alpha value of RGBA and is the last value:
rgba(172, 196, 165, 0.75)
More about rgba:
https://en.wikipedia.org/wiki/RGBA_color_space
https://css-tricks.com/the-power-of-rgba/
Think of making 2 layers in a photo editor filled with a color and then 75% transparency value, and then overlap them.
Also think what color may be behind the body element, that can differ from browser to browser, so a full color may be more consistent here.
I created the popup for the facebook when the popup load the entire background is goes to something like color code #ccc; which can i view the inside content also. How can do this in css here is the code that i tried .
#ptechsolfb {display:none;
background-color:#ccc transparent;
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
z-index:999999999;
opacity: 1; }
How can i do this. Any One would be much appreciated.
The correct way to make only the background opaque would be to apply an rgba color:
background:rgba(204,204,204,0.5);
This is the equivalent of #ccc but semi-transparent because it has an alpha value of 0.5.
If you change the opacity value for the entire div its contents will also go semi-transparent, which is not the intended behaviour.
Background opacity is achieved using rgba. For instance, this would create a black background (#000 or rgb(0,0,0)) with 50% (0.5) opacity:
element {
background-color:rgba(0, 0, 0, 0.5);
}
JSFiddle example.
To give a background of #CCC (rgb(204, 204, 204)) 75% opacity, you'd use:
element {
background-color:rgba(204, 204, 204, 0.75)
}
For background transparency, you need an rgba color definition. This would look like this:
background-color:rgba(200, 200, 200, 0.5);
Where the first three numbers are the red, green and blue components, and the fourth number is an opacity percentage for the 'alpha channel'.
However, please note that this syntax isn't supported in IE8 or earlier. It does work in pretty much all other current browsers, but IE8 support may be a problem for you.
If you need to support IE8, my suggestion is to use CSS3Pie, which is a polyfill script that adds support for this feature (and a load of other stuff) to old IE versions.
Hope that helps.
try something like this:
.Background
{
background-color:white;
background: rgba(0, 0, 0, 0.5);
}
about the value for opacity:
"Specifies the opacity. From 0.0 (fully transparent) to 1.0 (fully opaque)"
Here is the link: http://www.w3schools.com/cssref/css3_pr_opacity.asp
AND it wont work like you wrote it:
background-color:#ccc transparent;
You have to remove the transparent atribute from background-color property:
background-color:#ccc;
If you want a (nearly) cross-browser solution, you can try:
.alpha60 {
/* Fallback for web browsers that doesn't support RGBa */
background: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background: rgba(0, 0, 0, 0.6);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}
Where for IE, the first Hex pair (99) controls the opacity.
Source here.
my question says it all. I'm interested in the text color and the background color that disabled text-boxes in HTML use ( the entire CSS a disabled text-box use is also welcomed ). I need this so I would match the color settings of some readonly text-boxes with the color of disabled text-boxes in my html page ( don't want them to stick out ).
P.S. I need readonly text-boxes so I can capture events with them.
The background color is rgb(235, 235, 228); or #EBEBE4 in hex.
At least that's the value in chrome (checked with the debugger tools). This value could be different in other browser
They are whatever you set them to. Only IE9 and older have a fixed, unchangeable setup for disabled elements (which is oddly the only way you can get any kind of text-shadow in those versions...)
You can literally do this:
:disabled {background-color:pink; color:blue}
And get bubblegum-coloured textareas when you disable them!
What I'm trying to say is that you can set the styles to whatever you want, so you could do this:
:disabled, :read-only, [disabled], [readonly] {background:#cccccc; color:#ffffff}
I implemented the following to make any read-only textbox or textarea (useful in my case) appear disabled when it was readonly.
<style>
input:read-only,
textarea:read-only,
[contenteditable]:read-only {
cursor: not-allowed;
background-color: #EBEBE4 !important;
color: #C6C6C6;
}
</style>
Or this:
<style>
input:read-only,
textarea:read-only,
[contenteditable]:read-only {
pointer-events: none;
background-color: #EBEBE4 !important;
color: #C6C6C6;
}
</style>
Hopefully this helps someone!
It depends on the browser. In Chrome, it is the system color 'graytext', so you don't need to remember the hex code.
My chrome has the following default:
background-color: rgb(235, 235, 228);
color: rgb(84, 84, 84);
I guess it can change with browser though?
This is how it's rendered in Chrome:
textarea:disabled {
cursor: default;
background-color: rgba(239, 239, 239, 0.3);
color: rgb(84, 84, 84);
border-color: rgba(118, 118, 118, 0.3);
}