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?
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.
Aucun commentaire:
Enregistrer un commentaire