Develop Reference

change standard background color

I have a calendar on my site where the user can select a time range. I'm using the react-advanced-datetimerange-picker library for this, but I'm changing the library's default styles and ran into a problem.
I would like to change the background color in the box that I marked with a red arrow in the photo below. I also took a screenshot of the developer panel so you can see the styles and markup.
It seems like an easy task, but I've tried many options with no success.
What do I need to write in my .css file so that I can change the background color?
https://codesandbox.io/s/hopeful-khorana-gbjuiz

Simply change the background from #FFFFFF to any color you want!
There are many methods to achieve that
As seen in the screenshot
The input has a class inputDate
First Method
**
Assuming u want to set the background color to orange.
.inputDate{
background: Orange;
}
Another method:
You can use inline styling by adding style="background: orange" to the input
<input style="background: orange" class="inputDate"..... />

jQuery to update actual CSS

First off: I'm aware of the jQuery.css() function, but it doesn't work in my case. I'll explain why.
I have a jQuery color picker being used to change the highlighting of a website. I want to apply that color picker to the border of an element which only shows on hover.
The jQuery.css() function only applies the CSS to elements it finds, and does not work on the :hover CSS attribute.
I've tried adding a CSS class which I toggle on the hover, but it comes back to the same problem: I'm trying to change ONLY the hover value.
There's got to be a way to do this, but I've been searching StackOverflow and Google for the better part of an hour now, so I'm invoking xkcd #627

Use the hover event to achieve the same results.
$('selector').hover( function(){
//A function to execute when the mouse pointer enters the element.
$(this).css('property','value');
}, function(){
//A function to execute when the mouse pointer leaves the element.
$(this).css('property','value');
});

I'm adding this as an alternative answer.
If you need to dynamically change your CSS then there is something wrong with your CSS. It's very strange that you need a definition, that you can't toggle with a class and has to be generated dynamically.
Let's say you have a widget that can be in two modes: inactive or active. When it's active elements in it should respond visually to a hover event, when it's not, they shouldn't.
<div id="my-widget" class="my-widget-container">
<div class="element">Something to look at</div>
</div>
CSS
.my-widget-container .element { background-color: #ffffff; }
.my-widget-container.active .element:hover { background-color: #00ff00; }
You switch the mode by:
$("#my-widget").addClass("active");
This will activate the :hover line for the element which now appears interactive.
If I knew more about your situation I could perhaps fix a fitting solution.
Also, jQuery.css is poorly named, perhaps jQuery.style would be a better name since that is exactly what it does.

Jquery for radio button effect in divs

I'm realy new to css and jquery and I need help for my project.
I have 3 buttons: disadvantage - average - advantage and I need to make this buttons to work like radio buttons so if I click on disadvantage this button change background color and other butons lose colors if was clicked on him. and disadvantage button get red backrground color.
If I click on average button, this button must get yellow color and other lose color if was clicked on him before
-If I click on average button this button must get green background color and other buttons to lose color. so like radio buttons
BUt I try to do that based on #ID's
$('#price_quality_adv').css('background-color','#C90');
$('#reliability_adv').css('background-color','#C90');
http://jsfiddle.net/EC44Z/5/
please help. sorry for my english
THANKS!

Seems to be a scope issue of some kind, not sure if it is exclusive to jsFiddle environment. When I make this change, it is fixed (for the advantage button at least)
setQuality = function(qulaity, type_rating, name)
Fiddle: http://jsfiddle.net/EC44Z/8/
There are still some other issues however, the code is a little complex. It is better to do something like...
HTML
advantage
CSS
.button{ /* styles for all buttons */ }
.selected{ /* styles for selected button */ }
JS (jQuery)
$("#button_advantage").on('click',function(){
$(this).addClass('selected')
$(this).siblings().removeClass('selected')
})
Summary
The code should be separated, so it is easier to maintain, works well in various environments, and gets good search ranking etc...
HTML is for content, and should be marked up as such, with appropriate classes to group similar items, and unique id for relevant elements.
CSS is for style, and all styles should be kept together there where possible.
JS is for dynamic functionality, so in this case, adding a class, so that the style changes.

bg color, hover, !important and .css in javascript

I came across one problem.
I've created some "tabs" functionality as can be seen in demo: http://jsfiddle.net/4FLCe/
The plan was, when you hover over tab, its color changes to color A, when you click on tab, its color changes to color B.
As can be seen from demo, after click background color stopped changing on hover. I thought of adding !important to background color of hover, results can be seen: http://jsfiddle.net/4FLCe/1/
But that performed not as I wanted, hover now would work over background color set from javascript. Then I added !important to color set in javascript. That resulted in something terrible. The only browser that understood what I wanted to achieve was Opera.
Other browsers just stopped applying one from js. Demo: http://jsfiddle.net/4FLCe/2/
So the question is: how to achieve next - working hover, background of selected tab have higher 'priority' than hover so it won't change to background of hover on hover, and same result in ie,safari, opera, chrome, ff?

You should use a class instead of setting it through the .css() method..
So create
.selected-tab{
background-color:#d6d6d6!important;
}
and change your code to
$(function() {
$('.pagecontent').eq(0).show();
$('.tab').click(function() {
$('.pagecontent').hide();
$('.selected-tab').removeClass('selected-tab');
$(this).addClass('selected-tab');
$('.pagecontent').eq($(this).index()).show();
});
});
Demo at http://jsfiddle.net/gaby/4FLCe/3/

Change background color on elements with the same color

I'm trying to create a simple theme system here. I have few elements with red background color. I also have a button that will change the elements background color to green.
I'm trying to code but I couldn't figure out how can I select and change the bg color of all red elements to green!
For example, I have 4 divs. Two of these have a red header, and when I click the button these headers background color must be changed to green. It's Ok here, but the problem is that the divs are dynamically generated, so do I have do loop all the page to find the red bg color? Could someone enlight me? =)
Thanks a lot! =)

I think the best solution would be to use different stylesheet for each theme and keep the current theme value in SESSION or COOKIE or just pass it as URL argument. But that would be a server side solution.
On Client side, you can just use different classes for each theme and toggle them on the button push event using .toggleClass()
$('.green').toggleClass('red green');

The easiest way to do this would be to have a specific CSS class for each background color you're using. ex:
.color-red{ background-color: #FF0000; }
.color-green{ background-color: #00FF00; }
Once you do that you can select on the CSS class as well as set the CSS class:
$('#button-togreen').click(function(){
$('.color-red').removeClass('color-red').addClass('color-green');
}
It's kind of a round-about way of doing it, however there is no easy way to select on a CSS attribute (to do that you'd have to select all elements of the page and then check each one of them for the background color attribute which would be scarily inefficient...)

I don't know what you mean by headers, but I think this should do what you want:
$('.myDivs').filter(function(index){
return $(this).css('color') == 'red';
}).css('color', 'green');