CSS ändern Button-Stil nach dem Klick

Question

Ich frage mich, ob es eine Möglichkeit gab, den Stil einer Schaltfläche zu ändern, in CSS, nachdem es geklickt wurde, also nicht ein element:active. Danke!

Answer 1

Wenn Sie nach einer reinen CSS-Option suchen, versuchen Sie es mit der Pseudoklasse: focus.

#style { 
    background-color: red; 
} 

#style:focus {  
    background-color:yellow;  
} 

Answer 2

Es ist möglich, mit CSS nur durch Auswahl von aktiv und Fokus Pseudo-Element der Schaltfläche zu tun.

button:active{ 
    background:olive; 
} 

button:focus{ 
    background:olive; 
} 

Siehe codepen: http://codepen.io/fennefoss/pen/Bpqdqx

Sie auch eine einfache jQuery Klick-Funktion, die die Hintergrundfarbe ändert schreiben konnte.

HTML:

<button class="js-click">Click me!</button> 

CSS:

button { 
    background: none; 
} 

JavaScript:

$(".js-click").click(function() { 
    $(".js-click").css('background', 'green'); 
    }); 

Schauen Sie sich diese codepen: http://codepen.io/fennefoss/pen/pRxrVG

Answer 3

Was ist der Code Ihrer ist aber Tonne? Wenn es ein Tag, dann können Sie dies tun:

a { 
 
    padding: 5px; 
 
    background: green; 
 
} 
 
a:visited { 
 
    background: red; 
 
}

<a href="#">A button</a>

Oder Sie könnten jQuery verwenden, um eine Klasse auf Klick hinzufügen, wie unten:

$("#button").click(function() { 
 
    $("#button").addClass('button-clicked'); 
 
});

.button-clicked { 
 
    background: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="button">Button</button>

Answer 4

Wenn Ihre Schaltfläche ein <a> Element wäre, könnten Sie dieverwendenWahlschalter.

Sie sind jedoch begrenzt, können Sie nur ändern:

• Farbe
• background-color
• border-color (und seine Untereigenschaften)
• outline-color
• Die Farbanteile der Füll- und Stricheigenschaften

habe ich nicht lesen Sie this article about revisiting the :visited, aber vielleicht haben einige klügere Leute mehr Wege gefunden, um es zu hacken.

Answer 5

Jeder Link hat fünf verschiedene Zustände: link, hover, active, focused und visited.

Link ist die normale Erscheinung, hover ist, wenn Sie die Maus über das, active der Zustand ist, wenn es angeklickt wird, folgt focused aktiv und visited ist der Zustand, den Sie am Ende, wenn Sie die zuletzt geklickt Link unfocus.

Ich schätze, dass Sie einen anderen Stil auf beiden focus oder visited erreichen wollen, dann können Sie das folgende CSS hinzufügen:

a { color: #00c; } 
a:visited { #ccc; } 
a:focused { #cc0; } 

Eine empfohlene Bestellung in Ihrem CSS keine Probleme verursachen, ist die folgende :

a 
a:visited { ... } 
a:focused { ... } 
a:hover { ... } 
a:active { ... } 

können Sie Ihren Web-Browser-Entwickler-Tools verwenden, um die Zustände des Elements RS (Chrom-> developer Tools/inspizieren Element-> Stil-> Filter: HOV): zu zwingen Force state in Chrome Developer Tools