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?
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
Post a Comment