9

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)

Community
  • 1
  • 1
A T
  • 13,008
  • 21
  • 97
  • 158
  • http://css-tricks.com/almanac/properties/t/transition/ – Vitor Venturin Oct 08 '13 at 23:38
  • Cool feature, will prove useful; but my question is related to changing the entire document background not just the e.g.: hovered over element. – A T Oct 08 '13 at 23:41
  • 1
    http://stackoverflow.com/questions/12574668/change-color-of-sibling-elements-on-hover-using-css Not exactly your question, but the answer (which is no - unfortunately) is worth a read. – Barbara Laird Oct 08 '13 at 23:43
  • 1
    No, it's not possible due to the fact that there is't a 'parent' selector in CSS. You *can* do something like this thought: http://jsfiddle.net/6mTjF/1/ (a quick demo I just did to show how pseudo classes can be combined with `+` to add interactive effects) – Joe Oct 08 '13 at 23:45
  • Thanks frenchie, add that as an answer and I'll accept it – A T Oct 08 '13 at 23:47
  • 1
    Building on @Joe's comment. http://jsfiddle.net/bhlaird/6mTjF/2/. I added some evil absolute positioning and faked it. – Barbara Laird Oct 08 '13 at 23:50
  • 4
    @BarbaraLaird - nice! I've built upon yours to make it *look* like it's a click event: http://jsfiddle.net/6mTjF/3/ - it uses ` – Joe Oct 08 '13 at 23:54
  • Is there a trick to toggling multiple colours? - Like with radio buttons? - [as mock buttons] – A T Oct 13 '13 at 09:54

6 Answers6

8

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

A T
  • 13,008
  • 21
  • 97
  • 158
Joe
  • 15,205
  • 8
  • 49
  • 56
  • How do I get this to work with multiple buttons each toggling different colors? - http://jsfiddle.net/eYgdm/1/ – A T Oct 13 '13 at 09:53
3

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;
}

http://jsfiddle.net/JeffreyTaylor/g47Uh/

Jeff
  • 1,800
  • 8
  • 30
  • 54
  • Is there any way to persist it as `blue` using just CSS, or is what @frenchie said 100% without exception? – A T Oct 09 '13 at 02:09
  • 1
    @AT: there's :active, :hover, :checked ... but there's no :clicked in CSS. The closest you'll get it what Barbara Laird did http://jsfiddle.net/6mTjF/3/ – frenchie Oct 09 '13 at 02:20
  • Thanks for that link; hard to bind it to a button class (e.g.: from Twitter Bootstrap) – A T Oct 09 '13 at 22:21
1

No, there's no concept of "click then do something" in CSS.

frenchie
  • 51,731
  • 109
  • 304
  • 510
0

Unfortunately, there's no backtracing in css rules; for a css selecter, there's no way to climb up an element's ancestors.

Prusprus
  • 7,987
  • 9
  • 42
  • 57
0

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>

JSfiddle

A T
  • 13,008
  • 21
  • 97
  • 158
Sean
  • 626
  • 5
  • 12
0

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.

crablab
  • 1