フォーカスがあるときだけCSS効果を保持

Question

私はテーブルを持っています。各テーブルの行には、Yes/No/NAのボタングループがあります。また、テキストボックスなどがあります。

ユーザーが[はい]をクリックすると、ボタンが赤くなります。 [いいえ]をクリックすると、ボタンが緑色になります。これはうまくいきます。この問題は、ボタンをクリックしたとき、たとえばテキストボックスをクリックしたときの問題です。ボタンが色を失います。なぜどんなアイデア？ここで

はHTMLの一部...（行はまた、いくつかのテキストボックスなどがあります）まあ

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

あなたはそれが集中/アクティブisn'tボタンをオフに行くかですホバリング。

クリックするとクラスを追加する必要があり、そのクラスで色を付ける必要があります。

Answer 2

ボタンがフォーカスを失った後、元の状態に戻ります。アクティブそれを維持することにクラスを適用する

JavaScriptを使用：

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>

フィドル https://jsfiddle.net/d2wfqwf8/