0

I'm trying to create a 'light switch' with CSS to toggle the colours of a page. I've made a bad start using Joe's excellent response to this question: Change background on button click, using CSS only?

Is it possible to target the whole page rather than content inside divs? Also: can I do anything more to disguise the button as a link?

http://jsfiddle.net/gd4dma64/

HTML:

<label for="check" class="lights">Click here to invert colours</label>
<input type="checkbox" id="check" />
<div>This works...</br>
<a href="http://www.google.com">but how about links (and the button itself)...</a>
</div>
<p>and how about the full page (without containing everything in a div)?</p>

CSS:

body, a {
    color: #000
}
div {
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
}
input[type="checkbox"] {
    display: none;
}
input[type="checkbox"]:checked + div {
    background: #000;
    color: #fff;
}

Thank you for looking - and apologies, I'm really naive.

Community
  • 1
  • 1
Suresure
  • 143
  • 11
  • 1
    pseudo-class as far as i know have to be children only... would you settle for javascript its native to the browser.... – Careen Apr 25 '15 at 16:15
  • Thanks Careen - I thought that might end up being an answer! Do you know how I would go about it? – Suresure Apr 25 '15 at 16:27
  • qtgye's answer here is the javascript version: http://stackoverflow.com/a/28357455/1490943 I've ended up using. – Suresure Apr 27 '15 at 15:56
  • @Suresure any of the pure css solution below works for you? it's a surprise that you picked a js solution that you didn't even tag your question to it at all. – Stickers Apr 27 '15 at 20:47
  • Thanks sdcr - I tried combining them (your background
    plus the other answer to toggle the text) and the result works in Chrome and Firefox, but not Safari. It's also a bit inconvenient to have the switch outside the
    rather than inline with the text. I'm sorry - your solution got me close... I don't think I have the skill to pull it off. Here's as far as I got: http://jsfiddle.net/wgqpnqdp/2/
     – Suresure Apr 28 '15 at 09:20

2 Answers2

1

Hey you must change your css like this:

 input[type="checkbox"]:checked + label +div,
input[type="checkbox"]:checked + label +div>a
,input[type="checkbox"]:checked+label {
    background: #000;
    color: #fff;
}

And the html like this:

<input type="checkbox" id="check" />
<label for="check" class="lights">Click here to invert colours</label>
<div>This works...<br>
<a href="http://www.google.com">but how about links (and the button itself)...</a>
</div>
<p>and how about the full page (without containing everything in a div)?</p>
Fabrice Kabongo
  • 671
  • 10
  • 23
1

You can make the <div> as position:absolute page wise, and set z-index:-1; so it will be under your normal content.

body, a {
    color: #666;
}
div {
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
}
input[type="checkbox"] {
    display: none;
}
input[type="checkbox"]:checked + div {
    background: #000;
    color: #fff;
}
/*added code below*/
body {
    margin: 0;
}
div {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    left: 0;
    top: 0;
}
<label for="check" class="lights">Click here to invert colours</label>
<input type="checkbox" id="check" />
<div></div>
Stickers
  • 75,527
  • 23
  • 147
  • 186