CSS-Effekt, der nur behält, wenn Fokus hat

Question

Ich habe eine Tabelle. Jede Tabellenzeile hat eine Schaltflächengruppe mit Ja/Nein/NA. Es hat auch einige Textfelder, etc ...

Wenn der Benutzer auf Ja klickt, wird die Schaltfläche ROT. Wenn sie auf Nein klicken, ist die Schaltfläche GRÜN, etc .... Das funktioniert. Das Problem ist, wenn ich auf die Schaltfläche klicke, zum Beispiel in eine Textbox klicke. Die Schaltfläche verliert die Farbe. Irgendwelche Ideen warum?

Hier ist ein Teil des HTML ... (die Zeile hat auch einige Textfelder, etc.)

div.btn-group>button[data-rating='Yes']:default, 
 
div.btn-group>button[data-rating='Yes']:hover, 
 
div.btn-group>button[data-rating='Yes']:focus, 
 
div.btn-group>button[data-rating='Yes']:active, 
 
div.btn-group>button[data-rating='Yes'].active { 
 
    background-color: #00FF00; 
 
    /*background-image: linear-gradient(to bottom, #fff 0, #00FF00 100%);*/ 
 
}

<div class="btn-group" role="group" aria-label="..." id="Rating"> 
 
    <button type="button" class="btn btn-default" data-rating="Yes">Yes</button> 
 
    <button type="button" class="btn btn-default" data-rating="No">No</button> 
 
    <button type="button" class="btn btn-default" data-rating="NA">N/A</button> 
 
</div>

Answer 1

Nun, wenn Sie die Taste gehen sie isn't aktiv/fokussiert oder schwebte.

Sie müssen eine Klasse hinzufügen, wenn Sie darauf klicken, und die Klasse sollte die Farbe annehmen.

Answer 2

Nachdem die Schaltfläche den Fokus verliert, wird der vorherige Zustand wiederhergestellt.

JavaScript verwenden eine Klasse, um es anzuwenden, es zu halten aktiv:

let btnOn = document.querySelector('.btn-on'); 
 

 
btnOn.addEventListener('click',()=>{ 
 
    btnOn.classList.add('active'); 
 
})

.active { 
 
    background-color: #00FF00; 
 
}

<div class="btn-group" role="group" aria-label="..." id="Rating"> 
 
    <button type="button" class="btn btn-default btn-on" data-rating="Yes">Yes</button> 
 
    <button type="button" class="btn btn-default" data-rating="No">No</button> 
 
    <button type="button" class="btn btn-default" data-rating="NA">N/A</button> 
 
</div>

Fiddle https://jsfiddle.net/d2wfqwf8/