html - A 'light swtch' to toggle text and background colours for a full page using CSS -


i'm trying create 'light switch' css toggle colours of page. i've made bad start using joe's excellent response question: change background on button click, using css only?

is possible target whole page rather content inside divs? also: can more disguise button link?

http://jsfiddle.net/gd4dma64/

html:

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

css:

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

thank looking - , apologies, i'm naive.

hey must change css this:

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

and html this:

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

Comments

Popular posts from this blog

asp.net mvc - SSO between MVCForum and Umbraco7 -

Python Tkinter keyboard using bind -

ubuntu - Selenium Node Not Connecting to Hub, Not Opening Port -