web-dev-qa-db-fra.com

Changer de fond en cliquant sur un bouton, en utilisant uniquement CSS?

Est-il possible de changer la couleur d'arrière-plan sur button click; de la totalité document, en utilisant uniquement CSS et HTML5?

(exemple: c'est trivial en JavaScript )

javascriptjqueryhtml5css3background-image
8
A T

Basé sur le violon que j'ai posté dans les commentaires, je l'ai modifié très légèrement pour utiliser le bouton Bootstrap CSS.

Incluez simplement le fichier CSS de Bootstrap, puis utilisez le code ci-dessous.

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

Ceci utilise le sélecteur frère adjacent .

Cela fonctionne ici: http://jsfiddle.net/eYgdm/ (j'ai ajouté *-user-select: none; pour empêcher la sélection du texte de l'étiquette mais cela n'est pas obligatoire pour que l'étiquette fonctionne)

Support du navigateur

Chrome, Firefox [Ordinateur de bureau et mobile] (Gecko) ≥ 1.0, Internet Explorer ≥ 7, Opera ≥ 9 et Safari ≥ 3 Références: Sélecteurs d'attributs et Sélecteurs de fratrie adjacents

8
Joe

Vous pouvez faire quelque chose comme ceci - en utilisant le sélecteur css adjacent:

<button class="btn">button</button>
<div class="content"></div>

btn:active + .content{
    background: blue;
}

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

3
Jeff

Non, il n'y a pas de concept de "cliquez alors faites quelque chose" en CSS.

1
frenchie

Malheureusement, il n'y a pas de retour en arrière dans les règles CSS; pour un sélecteur de css, il n'y a aucun moyen de remonter les ancêtres d'un élément.

0
Prusprus

Il y a un moyen de le faire:

.cc2:focus {
background-color: #19A3FF;}

Le focus signifie essentiellement que lorsque vous cliquez sur l'élément de la classe cc2, il devient bleu en arrière-plan :) J'espère que cela aidera. 

0
crablab

Vous pouvez (ab?) Utiliser le sélecteur: target. Cela ne fonctionnera probablement pas avec les anciens navigateurs. Voici un exemple très simple que j'ai créé qui bascule l'arrière-plan lorsque l'utilisateur clique sur le lien.

Le concept consiste à appliquer le style CSS aux éléments ciblés. Dans le code ci-dessous, un clic sur le lien cible l'ID du corps, qui applique le style dans corps: cible (modification de la couleur de l'arrière-plan). 

<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

0
Sean