Javascript Girl
  1. Javascript Girl
  3. Comment puis-je changer la couleur d'arrière-plan d'un bouton lorsqu'il est cliqué?
Intereting Posts
Changer la visibilité DIV avec JavaScript Javascript regex: recherchez toutes les URL en dehors des étiquettes <a> – Tags imbriquées En utilisant jQuery différé ou promet d'attendre plusieurs appels $ .post pour terminer JavaScript dans jQuery mobile ne fonctionne que si je rafraîchis SHA-256 hashes différents entre C # et Javascript JQuery – comment attendre l'événement 'fin' de 'redimensionner' et seulement alors effectuer une action? Ddddddddddd DawoHdMachachachéletteddddddMMMMMMMMHMMMMMMMMM Explication de mémoires Javascript? Valeur de la propriété de la requête d'une classe css même si elle n'est pas utilisée WebSocket Service update Scope in Angular (Utilisation de ngWebSocket)? Fonction simple pour trier un ensemble d'objets Breadcrumb avec bootstrap je veux le rendre réactif Vérifier si une zone de texte est vide dans Javascript Quelqu'un peut-il expliquer ce scénario de fuite de mémoire javascript? Google maps (V3) – Map content selecter (en utilisant jquery)

Comment puis-je changer la couleur d'arrière-plan d'un bouton lorsqu'il est cliqué?

J'ai beaucoup étudié, et j'ai trouvé que JSFiddle ressemble à ce dont j'ai besoin, mais lorsque je clique sur le bouton, l'arrière-plan de la page change. Je souhaite que la couleur du bouton soit modifiée lorsque vous cliquez dessus. 

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; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } input[type="checkbox"]{ display: none; } input[type="checkbox"]:checked + div{ background: #5BC0DE; } label + input[type="checkbox"]:checked{ background: #000; } 
 <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"/> <label for="check" class="btn btn-default">Toggle background colour</label> <input type="checkbox" id="check" /> <div></div>

C'est assez trivial. Il suffit de déplacer l'élément de l' label "bouton" après la case à cocher pour que vous puissiez le sélectionner avec le sélecteur + (c'est ce qu'on appelle le sélecteur de frères et sœurs adjacents , il n'y a pas de sélecteur de frères et sœurs précédent, malheureusement) et de modifier le CSS pour correspondre. JSFiddle 

 div{ width: 100%; height: 100%; background: #5CB85C; position: absolute; top: 0; left: 0; z-index:1; } .btn { position: absolute; top:10px; left: 10px; z-index:2; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } input[type="checkbox"]{ display: none; } input[type="checkbox"]:checked + .btn { background: #5BC0DE; } /* label + input[type="checkbox"]:checked{ background: #000; } */ /* I've commented this last selector out as it is unused per Harry's point in the comments */ 
 <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"/> <input type="checkbox" id="check" /> <label for="check" class="btn btn-default">Toggle background color</label> <div></div>

Pour atteindre ce que vous voulez, dans votre css, utilisez la background-color lorsque vous cliquez sur le bouton.

La propriété "actif" est utilisée pour afficher le style d'événement cliqué …

HTML: 

 <input type='button' class='btn' value='test'/>

CSS: 

 .btn { background-color:#00ff00; } .btn:active { background-color:#ff00ff; }

TESTER

Essayez d'utiliser le code pseudo css: 

 #check { display: none; } #check + label.btn { cursor: pointer; border: 1px solid grey; padding: 6px 8px; background: ghostwhite; border-radius: 7px; box-shadow: 0px 1px 1px; } #check:checked + label.btn { background: wheat; } #check + label.btn:hover { box-shadow: 0px 3px 2px; } #check + label.btn:active { box-shadow: 0px 1px 1px inset; } 
 <input type="checkbox" id="check" /> <label for="check" class="btn">Toggle background colour</label>

Dans css, vous ne pouvez pas aller en arrière, vous devriez aller de l'avant comme suit.
Vous devez placer une étiquette après la boîte de saisie.

+ Est pour le prochain frère ou sœur. Il n'y a pas de sélecteur "précédent frère". 

 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; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } input[type="checkbox"]{ display: none; } input[type="checkbox"]:checked + label{ background: #5BC0DE; } label + input[type="checkbox"]:checked{ background: #000; } 
 <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"/> <input type="checkbox" id="check" /> <label for="check" class="btn btn-default">Toggle background colour</label> <div></div> 
 .nl [type=checkbox]:checked + span { background: #222222; background-repeat: no-repeat; } .nl label span { height: 18px; width: 18px; float: left; margin-right: 9px; border: 1px solid #d5d5d5; display: inline-block; background-color: #ff0000; } input[type="checkbox"], .checkbox-inline input[type="checkbox"] { position: absolute; margin-top: 4px \9; margin-left: -20px; } .nl label input { display: none; } 
 <div class="checkbox nl"> <label><input type="checkbox" class="checkboxx" name="rememberme" id="rememberme" value="1" checked="checkced"> Remember me<span></span></label> <input type="hidden" name="action" value="login"> </div>

changement 

 input[type="checkbox"]:checked + div{ background: #5BC0DE; }

à 

 input[type="checkbox"]:checked + .btn { background: #5BC0DE; }