For a psychology research project, we have to use "hot spot" question type in a qualtrics survey. When we click on a defined region, there is two default colors: green (like) and red (dyslike).
We would like to have the possibility to change these default colors (for example, black (like) and blue (dyslike) .
I tried these two css code lines without success:
*.Skin .HotSpot .Like .RegionInner .RegionInnerInner{background-color:black;filter:alpha(opacity=30);opacity:.3}*
*.Skin .HotSpot .Dislike .RegionInner .RegionInnerInner{background-color:blue;filter:alpha(opacity=30);opacity:.3}*
Any help would be greatly appreciated.
Thanks,
To use the filter property your CSS code should be:
filter: opacity(30%);
Also, why do you have a filter of 30% and the opacity of .3? on the same elements. They both do the same thing.
If you have link then please do add it to the original question and I'd be happy to take a look.
Most web browsers, by default, render pages as having a white background. However, this is to some extent user customizable, and some browsers are different. So, I want to find a way, either through CSS or JavaScript, to find out the background color of the page. The documentation on Mozilla's website suggests that document.bgColor can be used, and that its default value is white. It also suggests to not use it, since it's deprecated. But the docs seem to be in conflict with observed behavior: document.bgColor is an empty string if the page has no CSS to change it. The alternatives suggested don't work either: everything I tried gives me either an empty string or "transparent", which is clearly wrong: I can not see the desktop beneath my browser, hence it is not transparent. (Incidentally, IE11 actually behaves like Mozilla's documentation says that Firefox does. Go figure.)
I want to create an html list element (<ul>) whose background color matches the background color of the document. Is this possible? (I suppose you might be tempted to ask: if I want it to match the background, isn't "transparent" what I want? No. I want it to cover up some other element. Why? Because I'm making one of those auto-suggest thingies.)
Edit: 2 people have wisely suggested that I add an example so it becomes clear what on earth I'm talking about. Based on the answers I've been receiving, these 2 people are absolutely right. I've added a link to a fiddle in the comments of one of the answers, and now I'm adding it here:
https://jsfiddle.net/ftgu97fj/5/
You could use CSS2 system colors - note that these are deprecated in CSS3 and appearance property is advised to use instead.
ul { background-color: Background; } /* this should be desktop background */
ul { background-color: Window; } /* this is browser background */
However, after 5+ years, the standards turned 180 degrees: the appearance was abandoned (except for none value) and system colors are back with different names, see Michael Alan's answer here.
EDIT: Jan Turoň has found a method of doing this using CSS2 System Colors; Please defer to his answer. Note that the system colors are deprecated and that window is the default background color.
Based on the answer in this post regarding background color of highlighted text, it seems that this is likely not possible; the relevant question is also a browser-specific choice of a very similar nature:
Kaiido:
I would say that you can't.
Both getComputedStyle(yourElement, '::selection').backgroundColor and getComputedStyle(yourElement, '::-moz-selection').backgroundColor will return transparent as default value and browser won't override os's default.
(Worth to be mentioned that if you set it to transparent, default os' value will be overriden).
I don't think browsers have access to os default preferences, and if they do, they probably won't let any website access it it so easily.
This question suggests using a canvas element to sample the pixel color, but this unfortunately does not seem to work; in Chrome, it will return 0,0,0,0 for the color of an unset pixel. It gives a potential solution using chrome.tabs, but this is only available to chrome extensions.
The only possibility I can think of would be to use something like HTML2Canvas to "screenshot" the page and sample an empty pixel there, but there is no guarantee this library will operate properly for an unset background.
Nowadays, with access to the system colours and other user preferences, we can simply do this:
ul { background-color: Canvas }
See: CSS Color Module § System Colors
If <ul> element is a direct descendant of <body> element you can use css inherit keyword
ul {
background-color: inherit;
}
Since comments are getting way too long on OPs post, here's what I'd suggest you try:
window.getComputedStyle(document.body)['backgroundColor'])
The usecase of your autosuggest displaying correctly on pages where no background-color has been set (such as empty page) should be covered by setting white as the default background color for your ul. It becomes alot more problematic if you want to take possible background-images into account as well.
Please also be aware that html can have a background-color as well, and body may be limited in size to not cover the whole viewport. See this pen:
http://codepen.io/connexo/pen/jrAxAZ
This also illustrates that your expectation to see your desktop behind your browser if the body were truly tranparent is wrong.
This will definitely solve the problem! check how the js function works
function getBackground(jqueryElement) {
// Is current element's background color set?
var color = jqueryElement.css("background-color");
if (color !== 'rgba(0, 0, 0, 0)') {
// if so then return that color
return color;
}
// if not: are you at the body element?
if (jqueryElement.is("body")) {
// return known 'false' value
return false;
} else {
// call getBackground with parent item
return getBackground(jqueryElement.parent());
}
}
$(function() {
alert(getBackground($("#target")));
document.getElementById("ul").style.backgroundColor = getBackground($("#target"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<ul id= "ul" style="background-color: red">
<p id="target">I'd like to know that the background-color here is red</p>
</ul>
i kept the prompt for your better understanding
Hi I'm very confused about how to style angular material components (angular 1.4).
I basically took the source code from the material site here and dropped it in my project:
https://material.angularjs.org/latest/demo/subheader
I wanted a list with sticky headers so this component is perfect. However, I need the colors to be different- very different.
For example, I need the background to be transparent dark gray and the text to be light gray.
If possible, I'd like to change the scroller thumb color too. So, is this even possible? I tried using a custom theme, but it seems to only affect the header color.
If you downloaded the whole pack you will find in the /modules/closure a directory list of all the components. In the subheader folder you can find the subheader-default-theme.css file.
.md-subheader.md-THEME_NAME-theme {
color: '{{ foreground-2-0.23 }}';
background-color: '{{background-color}}'; }
.md-subheader.md-THEME_NAME-theme.md-primary {
color: '{{primary-color}}'; }
.md-subheader.md-THEME_NAME-theme.md-accent {
color: '{{accent-color}}'; }
.md-subheader.md-THEME_NAME-theme.md-warn {
color: '{{warn-color}}'; }
add it to your material_custom.css
set these to the values you prefer and then use the md-THEME_NAME_YOU_CHOOSE on the elements you need.
If you need further styling, inspect the element and add the style in the themes you already set.
So I'm creating a theme plugin for a forum where users often enter text with custom coloring. This is implemented as an inline style on a span.
The forum by default has a dark color scheme so most of the text is light. If I create a theme with a light color scheme this text would be hard to see.
I thought of using a CSS5 color filter that targets text with inline colors:
.Comment span[style^=color] {
filter: hue-rotate(180deg) invert(100%);
-webkit-filter: hue-rotate(180deg) invert(100%);
}
By inverting and rotating the color spectrum this turns a light blue color into a dark blue and light red into dark red, preserving the hue but making it darker. This actually works but it has the side effect of also inverting the colors of images and other elements embedded in the text.
I thought of doing another color inversion on child elements but this leaves images looking like junk since apparently hue-rotate is not very accurate at all.
A solution would be to have the CSS only target the text node of the span and not any child elements but that does not seem possible? Unless I'm missing something I don't see any selectors for text nodes.
Is there something I can do in jQuery to perform this color inversion? I'd rather not have to destroy all the coloring on the page as that would upset the users.
this Solution only goes lighter does not solve the problem:
I mis-read the question... I tried to delete this because it did not solve the problem for light backgrounds but it still appeared.
This can be accomplished by making use of rgba
Tested and works:
$(window).load(function() {
var col = $('.Comment').css('color').replace(')', ', 0.20)').replace('rgb', 'rgba');
$('.Comment').css('color', col);
});
var col converts rgb to rgba allowing for color percentage
Here's a solution that uses the javascript library tinycolor. A pure CSS solution would be much preferred but it doesn't seem possible.
$.getScript('https://rawgit.com/bgrins/TinyColor/master/tinycolor.js').done( function() {
$('.Comment span[style^=color]').each(function() {
var color = tinycolor($(this).css('color')).toHsl();
color.l = 1 - color.l;
$(this).css({'color': tinycolor(color).toRgbString()});
});
});
I am not great with JavaScript, and I am thinking this is a fairly easy answer.
Link to project:
http://dl.dropbox.com/u/4132989/example02/example02/index.html
What I'm trying to do:
Make the draggable cell turn red, and the text turn white, when it's dropped to it's correct location.
When I drag the green or orange cell to their correct locations, I have inserted this as a test to make sure I am able to target only when the drag is correct.
document.body.style.background="red"
If you look at the code, on drop, the border changes on the cell from solid, to dotted. What I am trying to do is be able to change any property on drop. I want to make the background of the cell red on drop and I'd like the text to turn white. I tried this:
REDIPS.drag.style.background="red"
However, this did not work and it made everything non-draggable.
To download the code use this link:
http://dl.dropbox.com/u/4132989/example02.zip
Thanks in advance for any help.
*Oh, the change I made is in the file redips-drag-min.js
You're close, but the object you really want to change is rd.target_cell, the cell that just received the drop action. Add the following inside the if (rd.target_cell.className ... conditional (line 31 of script.js):
rd.target_cell.style.background= 'red';