Is it possible to change the background color on button click; of the entire document, using only CSS and HTML5?
(e.g.: it's trivial in JavaScript)
6 Answers
Based on the fiddle I posted in the comments I've modified it very slightly to use the Bootstrap button CSS.
Just include Bootstrap's CSS file then use the code below.
HTML
<label for="check" class="btn btn-default">Toggle background colour</label>
<input type="checkbox" id="check" />
<div></div>
CSS
div {
width: 100%;
height: 100%;
background: #5CB85C;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
label.btn {
position: absolute;
top: 10px;
left: 10px;
z-index: 2;
}
input[type="checkbox"]{
display: none;
}
input[type="checkbox"]:checked + div{
background: #5BC0DE;
}
This uses the adjacent sibling selector.
Here it is working: http://jsfiddle.net/eYgdm/ (I've added *-user-select: none; to prevent selection of the label text but it's not required for the label to work)
Browser support
Chrome, Firefox [Desktop & Mobile] (Gecko) ≥ 1.0, Internet Explorer ≥ 7, Opera ≥ 9 and Safari ≥ 3 References: Attribute selectors and Adjacent sibling selectors
1 Comment
A T
How do I get this to work with multiple buttons each toggling different colors? - jsfiddle.net/eYgdm/1
You could do something like this -- using the adjacent css selector :
<button class="btn">button</button>
<div class="content"></div>
btn:active + .content{
background: blue;
}
3 Comments
A T
Is there any way to persist it as
blue using just CSS, or is what @frenchie said 100% without exception?
frenchie
@AT: there's :active, :hover, :checked ... but there's no :clicked in CSS. The closest you'll get it what Barbara Laird did jsfiddle.net/6mTjF/3
A T
Thanks for that link; hard to bind it to a button class (e.g.: from Twitter Bootstrap)
No, there's no concept of "click then do something" in CSS.
Comments
Unfortunately, there's no backtracing in css rules; for a css selecter, there's no way to climb up an element's ancestors.
Comments
You can (ab?)use the :target selector. This probably won't work in older browsers. Here's a super simple example I made that toggles the background when the link is clicked.
The concept is to apply CSS styling to targeted elements. In the code below, clicking the link will target the body's ID, which applies the style in body:target (changing the background color).
<html>
<head>
<style>
body { background-color:#333; }
body:target { background-color:#fff; }
</style>
</head>
<body id="myBody">
<a href="#myBody">Click</a>
</body>
</html>
Comments
There is a way to do it:
.cc2:focus {
background-color: #19A3FF;}
The :focus basically means when you click on the element with the class cc2 it will turn it's background blue :) Hope that helps.
+to add interactive effects)<label>and a hidden checkbox.