CODEWITHSUNDEEP
csscss-selectorschecked
Devilquest
Devilquest

Reputation: 112

Change div color with css checked selector

I have some problem when i try to change the color of a div using input tags. If the div is in the same section of the inputs it works perfect. But if i try to put the div in the footer, for example, stop working.

HTML:

 <section>
    <input id="select1" name="test" type="radio" checked />
        <label for="select1">Red</label>
    <input id="select2" name="test" type="radio" />
        <label for="select2">Green</label>
    <input id="select3" name="test" type="radio" />
        <label for="select3">Blue</label>
</section>
<footer>
    <div class="colorDiv"></div>
</footer>

CSS:

.colorDiv{
    width:50px;
    height:50px;
    background-color:red;
}

#select2:checked ~ .colorDiv{
    background-color:green;
}

#select3:checked ~ .colorDiv{
    background-color:blue;
}

Here is an example: http://jsfiddle.net/cqscc48g

There is any way to achieve that?

Thanks

Upvotes: 1

Views: 29698

Answers (4)

Deepak Ingole
Deepak Ingole

Reputation: 15742

Change your markup and go through comments in code,

.colorDiv {
  width: 50px;
  height: 50px;
  background-color: red;
}

#select2:checked~.colorDiv {
  background-color: green;
}

#select3:checked~.colorDiv {
  background-color: blue;
}
<section>
  <input id="select1" name="test" type="radio" checked />
  <label for="select1">Red</label>
  <input id="select2" name="test" type="radio" />
  <label for="select2">Green</label>
  <input id="select3" name="test" type="radio" />
  <label for="select3">Blue</label>
  <div class="colorDiv"></div>
  <!-- this should be adjacent as per your css selectors -->
</section>

Fiddle

Upvotes: 1

emdy
emdy

Reputation: 11

If you want click inside somewhere div and hover any of body div than set input at the top outside..

<style>
input[type=checkbox] {
  display:none;
}
input[type=checkbox]:checked ~ div.content{
  display:none;
}
</style>

<input type="checkbox" id="toogle-content"/>
<div>
     <label for="toogle-content" id="toogle-content">CLICK ME!</label>
</div>
<div class="content">
     I can toggle now ;)
</div>

Upvotes: -1

LcSalazar
LcSalazar

Reputation: 16841

Css is a cascading renderer. So it follows the DOM element's structure. Therefore, you can only relate elements that are descendants or, at least following siblings.

You have two options:

1 - Adjust your HTML:
You don't even need to put the div inside the input's section. But at least, you'd have to let the inputs out of the section, to make a "nephew" selector. (of course this denomination does not exists ;) )

JsFiddle - Changin HTML

<input id="select1" name="test" type="radio" checked />
    <label for="select1">Red</label>
<input id="select2" name="test" type="radio" />
    <label for="select2">Green</label>
<input id="select3" name="test" type="radio" />
    <label for="select3">Blue</label>

<footer>
    <div class="colorDiv"></div>
</footer>

And then you can select:

#select2:checked ~ footer .colorDiv{
    background-color:green;
}

#select3:checked ~ footer .colorDiv{
    background-color:blue;
}

2 - Use a Javascript approach:

If you love your HTML structure so much, then you must go Javascript. You can make it a lot sharper, but just an example:

JsFiddle - Using Javascript

function ChangeColor(color) {
    var clrDiv = document.getElementsByClassName("colorDiv")[0];
    clrDiv.style.backgroundColor = color;
}

document.getElementById("select1").onclick = function() { ChangeColor(""); }
document.getElementById("select2").onclick = function() { ChangeColor("green"); }
document.getElementById("select3").onclick = function() { ChangeColor("blue"); }

Upvotes: 14

danielg44k
danielg44k

Reputation: 55

Use .change() for every input. On change check id from clicked input and then change color of that div

Upvotes: -2

Related Questions