I'm trying to change the background color of a div with a checkbox in it. I've made this for reference. I'm trying to replace the parent <div> with the 'highlight' <div>, so I thought the toggle <div> would work. When the checkbox is deselected, I would like the background color to go back to normal (or remove the 'highlight' <div>). Any help is appreciated.
-
1The answers below suggest adding !important to your CSS class. Please do not add important. It would be better to remove the inline styles and inline javascript before applying the !important attribute.Tim Banks– Tim Banks2013-01-17 15:39:47 +00:00Commented Jan 17, 2013 at 15:39
-
I just tried to click the checks in IE8 and they don't check...Mark Schultheiss– Mark Schultheiss2013-01-17 15:48:45 +00:00Commented Jan 17, 2013 at 15:48
Add a comment
|
2 Answers
You are setting an inline background-color style for the divs. This takes precedence over any properties you set via a CSS rule.
Add !important to the background-color value of the checked class in your css file, like so: http://jsfiddle.net/KtsGs/1/
3 Comments
drmonkeyninja
It's best to avoid use of !important as that may cause problems further down the line. It would be better to remove the inline styles from the markup and put them in the CSS using :hover for the effect.
Martín Valdés de León
There are too many things wrong with his example: The use of inline CSS, the use of inline event handlers, the implicit
* selector when using :checkbox, using javascript for hovers instead of pure CSS. I just addressed what was wrong with the logic he decided to use.drmonkeyninja
Fair point. Unfortunately the numerous things wrong in the example are likely to lead the developer into further frustrating problems as the hack-y solutions will become harder and harder to overcome.
There are a few issues present in the jsFiddle.
The first one is that, despite having written jQuery code, you haven't selected jQuery as the framework on the left hand side. That's a small issue specific to the code on jsFiddle, and easily fixed, though.
The second issue is that you have inline styles on the <div> elements, including a background-color. That inline style will be used in preference to any background-color specified using a CSS class (unless it's specified as being !important), so even when your code correctly adds the checked class to the element, the background colour isn't going to change.
The simplest solution is to simply change your CSS declaration:
.checked {
background-color: #ff0000 !important;
}
Here is an updated version of your jsFiddle with the working functionality (using the suggestion above).
However, I'd suggest you instead move the inline styles and JavaScript event handlers to their own CSS declarations, so you don't have to specify !important. That would require the following changes:
#holder > div {
clear: both;
padding: 0.5%;
margin-bottom: 1px;
border-bottom: 1px solid #eee;
float: left;
width: 96%;
style: height: 16px;
cursor: pointer;
background-color: white; // added this to the existing CSS
}
#holder > div:hover { // this is new
background-color: #fafafa;
}
Then move the CSS declaration for .checked below those, so that it takes precedence for the background-color property.
Here is another updated version of your jsFiddle, using the CSS declarations instead.
